{"id":3063,"date":"2017-08-09T08:22:09","date_gmt":"2017-08-09T02:52:09","guid":{"rendered":"https:\/\/code4developers.com\/?p=3063"},"modified":"2020-08-23T13:06:09","modified_gmt":"2020-08-23T07:36:09","slug":"advanced-css-tricks-and-techniques","status":"publish","type":"post","link":"https:\/\/code4developers.com\/advanced-css-tricks-and-techniques\/","title":{"rendered":"Advanced CSS Tricks and Techniques"},"content":{"rendered":"

A wonderful collection of some bleeding edge CSS techniques for you to try out. Some of these might not be fully supported, so use in production at your peril!<\/h4>\n

As time goes by, CSS is becoming more and more powerful. Nowadays, it allows a lot of possibilities. This article is a compilation of fresh, advanced tips and techniques to master your CSS skills. \u00a0\u00a0<\/p>\n

\"css\"Warning:\u00a0<\/strong>Some techniques contained in this article are still considered as experimental. Make sure to check the browser compatibility before you implement them on a production site.<\/p>\n

Using SVG for Icons<\/h2>\n

SVG is supported by all modern browsers and scales well for all resolution types, so there\u2019s no reason to continue using\u00a0.jpg<\/code>\u00a0or\u00a0.gif<\/code>\u00a0images for icons. Note the use of the\u00a0background-size<\/code>\u00a0property to scale the background image on the on container size.<\/p>\n

\n
\n
\n
\n
\n
\n
\n
\n
\n
.logo {\r\n display: block;\r\n text-indent: -9999px;\r\n width: 100px;\r\n height: 82px;\r\n background: url(kiwi.svg);\r\n background-size: 100px 82px;\r\n}<\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
Source:\u00a0CSS Tricks<\/a><\/strong><\/p>\n
Fixed Table Layouts<\/h2>\n
A widely supported but surprisingly little-known property which changes the way the tables are rendered and gives you a sturdier, more predictable layout.<\/p>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
table {\r\n table-layout: fixed;\r\n}<\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
Source:\u00a0CSS Tricks<\/a><\/strong><\/p>\n
Curve Text Around a Floated Image<\/h2>\n
The\u00a0shape-outside<\/code>\u00a0is a CSS property that allows geometric shapes to be set in order to define an area for text to flow around.<\/p>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
.shape {\r\n width: 300px;\r\n float: left;\r\n shape-outside: circle(50%);\r\n}<\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
Here\u2019s the result of the\u00a0.shape<\/code>\u00a0class applied to the image:
\n\"curved-text-css\"<\/p>\n
Source:\u00a0WebDesigner Depot<\/a><\/strong><\/p>\n
Intrinsic Ratio Boxes<\/h2>\n
Using 20% for padding makes the height of the box equal to 20% of its width. No matter the width of the viewport, the child div will keep its aspect ratio (100% \/ 20% = 5:1).<\/p>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
.container {\r\n height: 0;\r\n padding-bottom: 20%;\r\n position: relative;\r\n}\r\n\u00a0\r\n.container div {\r\n border: 2px dashed #ddd; \r\n height: 100%;\r\n left: 0;\r\n position: absolute;\r\n top: 0;\r\n width: 100%;\r\n}<\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
Source:\u00a0AllThingsSmitty<\/a><\/strong><\/p>\n
Color Fade on Hover<\/h2>\n
A very easy way to make your links (or any other element) look better.<\/p>\n
\n
\n
\n
\n
\n
a {\r\n color: #000;\r\n -webkit-transition: color 1s ease-in; \/*safari and chrome *\/\r\n -moz-transition: color 1s ease-in; \/* firefox *\/\r\n -o-transition: color 1s ease-in; \/* opera *\/\r\n}\r\n\u00a0\r\na:hover { \r\n color: #c00;\r\n}\r\n<\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
Source:\u00a0Matt Lambert<\/a><\/strong><\/p>\n
Style Broken Images<\/h2>\n
Broken images never look good, but ievery now and then, one or two images on your site are broken. Using some advanced CSS, it is possible to style broken images and provide custom error messages to your visitors.<\/p>\n
\n
\n
\n
\n
\n
img { \r\n min-height: 50px;\r\n}\r\n\u00a0\r\nimg:before { \r\n content: \" \";\r\n display: block;\r\n position: absolute;\r\n top: -10px;\r\n left: 0;\r\n height: calc(100% + 10px);\r\n width: 100%;\r\n background-color: rgb(230, 230, 230);\r\n border: 2px dotted rgb(200, 200, 200);\r\n border-radius: 5px;\r\n}\r\n\u00a0\r\nimg:after { \r\n content: \"\\f127\" \" Broken Image of \" attr(alt);\r\n display: block;\r\n font-size: 16px;\r\n font-style: normal;\r\n font-family: FontAwesome;\r\n color: rgb(100, 100, 100);\r\n position: absolute;\r\n top: 5px;\r\n left: 0;\r\n width: 100%;\r\n text-align: center;\r\n}<\/pre>\n
 <\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
Look what can be achieved with that technique. Way better than browsers\u2019 default, right?
\n\"broken-image-css\"<\/p>\n
Source:\u00a0Bitsofco.de<\/a><\/strong><\/p>\n
Empty and Not Empty Attribute Selectors<\/h2>\n
CSS3 makes it easy to apply different styles to an element regardless of whether a\u00a0data-*<\/code>\u00a0attribute is empty. Have a look at the HTML code below:<\/p>\n
\n
\n
\n
\n
\n
<div data-attr=\"\">\r\n<\/div>\r\n<div data-attr=\"value\">\r\n<\/div><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
And now, our CSS, with specific styling for any\u00a0div<\/code>\u00a0element with an empty\u00a0data-attr<\/code>\u00a0attribute:<\/p>\n
\n
\n
\n
\n
\n
div {\r\n\u00a0border: 1px solid gray;\r\n\u00a0height: 100px;\r\n\u00a0margin: 10px;\r\n\u00a0width: 100px;\r\n}\r\n\/* Empty attribute selector *\/\r\n\u00a0div[data-attr=''] { \r\n\u00a0background: red; \r\n}\r\n \/* Not empty attribute selector *\/ \r\ndiv:not([data-attr='']) {\r\nbackground: green;\r\n}\r\n<\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
Source:\u00a0Vacheslav Starikov<\/a><\/strong><\/p>\n
Comma-Separated Lists<\/h2>\n
A little snippet to display an unordered list as a comma-separated list. Note the use of\u00a0:not(:last-child)<\/code>to ensure that the last list element won\u2019t be followed by a comma.<\/p>\n
\n
\n
\n
\n
\n
ul > li:not(:last-child)::after {\r\ncontent: \",\";\r\n}<\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
Source:\u00a0AllThingsSmitty<\/a><\/strong><\/p>\n<\/article>\n","protected":false},"excerpt":{"rendered":"
A wonderful collection of some bleeding edge CSS techniques for you to try out. Some of these might not be fully supported, so use in production at your peril! As…<\/p>\n","protected":false},"author":7,"featured_media":3065,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[49],"tags":[50,52,51],"powerkit_post_featured":[],"class_list":{"0":"post-3063","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-htmlstylesheet","8":"tag-css3","9":"tag-html","10":"tag-stylesheet"},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/08\/css_image.png?fit=384%2C384&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8NAi4-Np","jetpack-related-posts":[{"id":3757,"url":"https:\/\/code4developers.com\/bootstrap-basics-for-beginners\/","url_meta":{"origin":3063,"position":0},"title":"Bootstrap basics for beginners","author":"Patel Harsh","date":"July 2, 2018","format":false,"excerpt":"Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web. In this article we will discuss about basics of bootstrap. Bootstrap: Bootstrap is a free front-end framework for faster and easier web development It includes HTML and CSS based design templates for\u2026","rel":"","context":"In "HTML\/Stylesheet"","block_context":{"text":"HTML\/Stylesheet","link":"https:\/\/code4developers.com\/category\/htmlstylesheet\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/07\/Boostrap_logo.svg_.png?fit=200%2C201&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3251,"url":"https:\/\/code4developers.com\/css-keylogger\/","url_meta":{"origin":3063,"position":1},"title":"CSS Keylogger","author":"Arif Khoja","date":"February 27, 2018","format":false,"excerpt":"This post is based on\u00a0Chrome extension and Express server that exploits keylogging abilities of CSS i.e. CSS Keylogger. Scary little attack using essentially a bunch of attribute selectors. This attack is really simple. Utilizing CSS attribute selectors, one can request resources from an external server under the premise of loading\u2026","rel":"","context":"In "HTML\/Stylesheet"","block_context":{"text":"HTML\/Stylesheet","link":"https:\/\/code4developers.com\/category\/htmlstylesheet\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/08\/css_image.png?fit=384%2C384&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3520,"url":"https:\/\/code4developers.com\/angular-5-class-binding-ngclass-directive\/","url_meta":{"origin":3063,"position":2},"title":"Angular 5 Class Binding & ngClass Directive","author":"Nisarg Dave","date":"May 2, 2018","format":false,"excerpt":"In this article we will see how can we bind CSS class to HTML element (class binding) in Angular 5. We will also discuss about ngClass directive to add or remove multiple classes from HTML element with example. Examples I have already created first-app component in my Angular 5 application.\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/05\/8.1-300x100.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":3150,"url":"https:\/\/code4developers.com\/webpack-introduction-without-code\/","url_meta":{"origin":3063,"position":3},"title":"Webpack: introduction without any code.","author":"Arif Khoja","date":"December 1, 2017","format":false,"excerpt":"There have existed build tools for JavaScript as long as I have been coding with it. I can without doubt say that they are better and easier to understand today than they have ever been. But there are also much more you \u201cneed\u201d to know before you get started. The\u2026","rel":"","context":"In "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":2625,"url":"https:\/\/code4developers.com\/angular-4-project-structure\/","url_meta":{"origin":3063,"position":4},"title":"Angular 4 Project Structure","author":"Nisarg Dave","date":"June 18, 2017","format":false,"excerpt":"Introduction In previous article we learned about Angular 4 Installation. You can find that article on https:\/\/code4developers.com\/angular-4-installations\/\u00a0. This article describes the project structure of Angular 4 application which Angular CLI created for us. I have already created ANGULAR4DEMO project in my previous article, so we will use that project to\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/1-1.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3182,"url":"https:\/\/code4developers.com\/react-blog-post-serieses-react-development\/","url_meta":{"origin":3063,"position":5},"title":"React: A blog post series about React development","author":"Arif Khoja","date":"December 30, 2017","format":false,"excerpt":"One of the first things I wrote down in my notebook as I was planning or trying to figure out if there was enough stuff to write about to do this site was a React introduction. I know React fairly well, and have been working full-time with it for quite\u2026","rel":"","context":"In "React"","block_context":{"text":"React","link":"https:\/\/code4developers.com\/category\/react\/"},"img":{"alt_text":"react","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/12\/react_2.png?fit=375%2C375&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3063","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/comments?post=3063"}],"version-history":[{"count":5,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3063\/revisions"}],"predecessor-version":[{"id":12834,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3063\/revisions\/12834"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media\/3065"}],"wp:attachment":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media?parent=3063"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/categories?post=3063"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/tags?post=3063"},{"taxonomy":"powerkit_post_featured","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/powerkit_post_featured?post=3063"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}