Posts

Showing posts from December, 2020

CSS Advanced #2

  CSS  The object-fit Property: The CSS   object-fit   property is used to specify how an <img> or <video> should be resized to fit its container. Example :  img  {   width :  200px ;   height :  400px ;   object-fit :  cover ; } All Values of The CSS object-fit Property The  object-fit  property can have the following values: fill  - This is default. The replaced content is sized to fill the element's content box. If necessary, the object will be stretched or squished to fit contain  - The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box cover  - The replaced content is sized to maintain its aspect ratio while filling the element's entire content box. The object will be clipped to fit none  - The replaced content is not resized scale-down  - The content is sized as if none or contain were specified (would result in a smaller co...

CSS Advanced #1

 CSS CSS Rounded Corners With the CSS  border-radius  property, you can give any element "rounded corners". Example :  #rcorners1  {   border-radius :  25px ;   background :  #73AD21 ;   padding :  20px ;   width :  200px ;   height :  150px ; } Four values - border-radius: 15px 50px 30px 5px;   (first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner) CSS Overflow The  overflow  property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area. The  overflow  property has the following values: visible  - Default. The overflow is not clipped. The content renders outside the element's box hidden  - The overflow is clipped, and the rest of the content will be invisible ...