CSS
CSS snippets repository to avoid reinventing the wheel.
side notes
p.note {
border-style: solid;
border-width: 1px;
border-left-width: 15px;
padding: 10px;
}
Note: The "border-left-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.
Attributes Selection
http://www.w3schools.com/css/css_attribute_selectors.asp
attribute | example | <description |
---|---|---|
[target] | a[target] | selects |
[attr="val"] | a[target]="_blank"] | |
[attr~="val"] | [title~="flower"] | selects element with an attribute val containing specified (whole) word |
[attr|="val"] | [class|="top"] | selects el with an attribute starting with word (whole word): top-gun |
[attr^="val"] | [class^="top"] | selects el with an attribute starting with a string (not whole word): topgun |
[attr$="val"] | [class$="top"] | selects el with an attribute ending with a string (not a whole word ): guntop |
[attr*="val"] | [class*="top"] | selects el containing specified string (not a whole word): gutopgun |
CSS3 Pseudo-elements
Pseudo-elements are not pseudo-classes. In contrast to pseudo-classes, pseudo-elements can be used to style a specific part of an element. More on pseudo-elements at MDN.
<q> for short quotation
Here is an example of using ::before and ::after pseudo-elements:
/* open and closing quotes like in Polish language */
Q { quotes: "\201E" "\201D" }
Q::before { content: open-quote }
Q::after { content: close-quote }
/* quotes like << >> */
Q1 { quotes: "\00AB" "\00BB" }
Q1::before { content: open-quote }
Q1::after { content: close-quote }
And results:
Open and closed quotes.
CSS3 Pseudo-classes
In contrast to pseudo-classes, pseudo-elements can be used to style a specific part of an element.
- :first-child, :nth-child(), :nth-last-child() :last-child
- :only-child (represents an element without any siblings)
- :not()
- :out-of-range
- :root
CSS3 Rounded Corners
With CSS3, you can give any element “rounded corner”, by using the border-radius property. Radius from CSS Reference. Also some border-radius tricks.
Here is for the background.
This example is for the border.
This example is for a background image.
CSS3 Shadow Property
At example above (CSS3 Rounded Corners) you can clearly see shadowed boxes. This is how box-shadow property works. The text-shadow property is applied to each h1,h2 headers.
The subject is elaborated at W3Schools.
Circular Images
Circular Images with border-radius
.
![](http://jurek.kedra.org/img/lidzia50a.jpg)
![](http://jurek.kedra.org/img/lidzia50a.jpg)
CSS3 Backgrounds
CSS3 Border Images
- At Google Images there are tons of background images.
- Border Image Generator
- W3Schools Border Images
CSS3 Multiple Backgrounds
More details on CSS3 backgrounds may be found at
W3Schools.
CSS3 Gradients
Multiple options are available. A lot of examples can be found at W3Schools.
RGBa Browser Support
RGBa is a way to declare a color in CSS that includes alpha transparency support.
By setting the CSS opacity property, we can adjust the transparency of the entire element and its contents. RGBa colour gives us something different – the ability to control the opacity of the individual colours rather than the entire element.
It looks like this:
#rgbatest {
color: rgba(255,255,255,.8);
background-color: rgba(142,213,87,.3);
}
#rgbatest:hover {
color: rgba(255,255,255,1);
background-color: rgba(142,213,87,.6);
}
- An article about RGBa Browser Support.
- RGBa Generator
- RGBa vs opacity
- RGBA color space
Transformations and Transitions
CSS3 Transformations
The example above uses HTML5
W3Schools describes CSS3 2D and 3D transformations.
CSS3 Transitions
CSS3 Transitions are not transformations. Using them together adds dynamic feeling to a page.
CSS Style Guides
CSS
- CSS Tricks - a lot of great content.
- CSS W3 Schools - CSS tutorial, a lot of editable examples.
- Learn Layout - CSS layouts explained.
- CSS color names
- Border Image Generator
- MDN CSS Getting Started and CSS Reference.
- Style Guide
Sass
- Syntactically Awesome StyleSheets, and its reference.
- Sass Playground - check how your CSS looks like.
- Sass vs Less, Less wiki
- Using Sass with Jekyll
- Web Layouts with Susy
- From CSS to Sass in WordPress
- Responsive Typography
- Breaking Free from Bootstrap
Bootstraps
- Bootstrap
- W3CSS
- Nice bootstrap list from learnlayout.com.