{"id":196,"date":"2018-12-10T12:04:52","date_gmt":"2018-12-10T11:04:52","guid":{"rendered":"https:\/\/www.fabbrika.com\/blog\/?p=196"},"modified":"2018-12-11T14:18:04","modified_gmt":"2018-12-11T13:18:04","slug":"css3-tips","status":"publish","type":"post","link":"https:\/\/www.fabbrika.com\/blog\/css3-tips\/","title":{"rendered":"CSS3 tips"},"content":{"rendered":"

Responsive viewport units (vw, vh, and vmin)<\/a><\/h2>\n
article > section <\/span>{<\/span>\r\n    column-width<\/span>:<\/span> 22rem;<\/span>\r\n    column-gap<\/span>:<\/span> 2.6rem;<\/span>\r\n                \r\n    height<\/span>:<\/span> 80vh;<\/span>\r\n    width<\/span>:<\/span> 80vw;<\/span>\r\n        \r\n    overflow<\/span>:<\/span> scroll;<\/span>\r\n}<\/span><\/pre>\n
object-fit: cover<\/h2>\n
img {\r\nwidth: 200px;\r\nheight: 400px;\r\nobject-fit: cover;<\/strong>\r\n}\r\n<\/pre>\n
backface-visibility<\/a><\/h2>\n
img {<\/div>\n
\u00a0\u00a0position: absolute;
\nanimation: turn 2s infinite;<\/div>\n
}<\/div>\n
.donut-front {<\/div>\n
\u00a0\u00a0z-index: 5;<\/div>\n
\u00a0\u00a0backface-visibility: hidden;<\/strong><\/div>\n
}<\/div>\n
@keyframes turn {<\/div>\n
\u00a0\u00a0to {<\/div>\n
\u00a0 transform: rotateY(360deg);<\/div>\n
\u00a0\u00a0}<\/div>\n
}<\/div>\n
 <\/p>\n
REM VS EM<\/h2>\n\n\n\n\n
rem<\/td>\nRelative to font-size of the root element<\/td>\n<\/tr>\n
em<\/td>\nRelative to the font-size of the element (2em means 2 times the size of the current font)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
:nth-child<\/h2>\n
p:nth-child(odd<\/strong>) {
\nbackground: red;
\n}<\/p>\n
p:nth-child(even<\/strong>) {
\nbackground: blue;
\n}<\/p>\n
p:nth-child(3n+0<\/strong>) {
\nbackground: red;
\n}<\/p>\n
Using a formula (an<\/i> + b<\/i><\/strong>). Description: a<\/i><\/strong> represents a cycle size, n<\/i><\/strong> is a counter (starts at 0), and b<\/i><\/strong> is an offset value.<\/p>\n
Specifying two sizes in CSS font property<\/h2>\n
font<\/span>:<\/span> 14px<\/span>\/<\/span>60px<\/span><\/code><\/pre>\n
=<\/p>\n
font<\/span>-<\/span>size<\/span>:<\/span> 14px<\/span>;<\/span>\r\nline<\/span>-<\/span>height<\/span>:<\/span> 60px<\/span>;\r\n<\/span><\/code><\/pre>\n
Link Utili<\/h2>\n
http:\/\/www.css3.info\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Responsive viewport units (vw, vh, and vmin) article > section { column-width: 22rem; column-gap: 2.6rem; height: 80vh; width: 80vw; overflow: scroll; } object-fit: cover img { width: 200px; height: 400px; object-fit: cover; } backface-visibility img { \u00a0\u00a0position: absolute; animation: turn 2s infinite; } .donut-front { \u00a0\u00a0z-index: 5; \u00a0\u00a0backface-visibility: hidden; } @keyframes turn { \u00a0\u00a0to { […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/www.fabbrika.com\/blog\/wp-json\/wp\/v2\/posts\/196"}],"collection":[{"href":"https:\/\/www.fabbrika.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fabbrika.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fabbrika.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fabbrika.com\/blog\/wp-json\/wp\/v2\/comments?post=196"}],"version-history":[{"count":8,"href":"https:\/\/www.fabbrika.com\/blog\/wp-json\/wp\/v2\/posts\/196\/revisions"}],"predecessor-version":[{"id":204,"href":"https:\/\/www.fabbrika.com\/blog\/wp-json\/wp\/v2\/posts\/196\/revisions\/204"}],"wp:attachment":[{"href":"https:\/\/www.fabbrika.com\/blog\/wp-json\/wp\/v2\/media?parent=196"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fabbrika.com\/blog\/wp-json\/wp\/v2\/categories?post=196"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fabbrika.com\/blog\/wp-json\/wp\/v2\/tags?post=196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}