Skip to main content

Posts

Showing posts with the label CSS Tricks

Things you may not know about CSS

Grammatical error like style using CSS: .grammar{ -moz-text-decoration-color: green; -moz-text-decoration-line: underline; -moz-text-decoration-style: wavy; text-decoration-color: green; text-decoration-line: underline; text-decoration-style: wavy; } Output : CSS 'empty-cells' Property table{ empty-cells:hide; }    CSS @supports  Usually we do CSS feature-test using JavaScript. Now it can be done in CSS with a new property '@supports' . So for Firefox 22+ , Chrome 28+, Opera 12.1+ supports this feature. So we can look forward to using it soon! Example: /* basic usage */ @supports(prop:value) { /* more styles */ } /* real usage */ @supports (display: flex) { div { display: flex; } } /* testing prefixes too */ @supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) { section { display: -webkit-flex; display: -moz-flex; display: f...

CSS Selectors

Pattern Meaning Described in section First defined in CSS level * any element Universal selector 2 E an element of type E Type selector 1 E[foo] an E element with a "foo" attribute Attribute selectors 2 E[foo="bar"] an E element whose "foo" attribute value is exactly equal to "bar" Attribute selectors 2 E[foo~="bar"] an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar" Attribute selectors 2 E[foo^="bar"] an E element whose "foo" attribute value begins exactly with the string "bar" Attribute selectors 3 E[foo$="bar"] an E element whose "foo" att...

Creating arrow edges using CSS

Before we start, we have to understand the concept behind  " border " Basically, borders render like this: #sampleStyle{ border-top : 25px solid #a71d95; border-right : 25px solid #1da2a7; border-bottom: 25px solid #70a71d; border-left : 25px solid #c10902; width :60px; heigth:60px; } If we compress the content area, i.e) make width and height values to "0px" #sampleStyle{ border-top : 25px solid #a71d95; border-right : 25px solid #1da2a7; border-bottom: 25px solid #70a71d; border-left : 25px solid #c10902; width :0px; heigth:0px; } If we want right arrow , make all  border-color  except  border-left-color  to  transparent #sampleStyle{ border-top : 25px solid #a71d95; border-right : 25px solid #1da2a7; border-bottom: 25px solid #70a71d; border-left : 25px solid #c10902; width :0px; heigth:0px; } Example: .arrow_box { position: relative; ...