CSS is becoming more and more powerful and nowadays it allows a lot of possibilities. This talk compiles examples of more advanced tips and techniques to add to your CSS skills. Have you ever wanted to curve text around a floated image? Or maybe style broken images? How about using attribute selectors more effectively? Then this talk is for you.
See here for the example files: https://drive.google.com/open?id=1fumPPwRo1wvCKwOw5qQgVrenJnnchFJ5
3. FIXED TABLE LAYOUTS
* Not widely known
* Changes the way tables are rendered
* More predictable layout
4. CURVE TEXT AROUND A FLOATED
IMAGE
shape-outside property
Allows geometric shapes to be set, in order to define an area for text to flow
around.
The shape must have its dimensions specified.
Set the height and width of the element.
These will be used by the shape function to create a coordinate system that is used when wrapping text
around the image.
Provides functionality to create these shapes:
Circle
shape-outside: circle(50%);
Ellipse
shape-outside: ellipse(50px 100px at 50% 50%);
Polygon
clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
shape-outside: polygon(0% 0%, 100% 0%, 50% 100%);
5. CURVE TEXT AROUND A FLOATED
IMAGE
Circle
shape-outside: circle(50%);
The full notation for circle() is circle(r at cx cy) where r is the radius of the circle and
cx and cy are the coordinates for the center of the circle.
If you omit them, the center of the image will be used as the default values.
6. CURVE TEXT AROUND A FLOATED
IMAGE
Ellipse
shape-outside: ellipse(50px 100px at 50% 50%);
Ellipse is a variation of the circle where the item is elongated on either the
horizontal or vertical axis.
The full notation for ellipse() is ellipse(rx ry at cx cy)
rx and ry are the radiuses for the ellipse and cx and cy are the coordinates for the center of the ellipse.
7. CURVE TEXT AROUND A FLOATED
IMAGE
Polygon
clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
shape-outside: polygon(0% 0%, 100% 0%, 50% 100%);
The polygon function provides an unlimited range of shapes.
The full notation for polygon() is polygon(x1 y1, x2 y2, …)
each pair specifies the x & y coordinates for a vertex of the polygon.
To use the polygon() function you must specify a minimum of 3 pairs of vertex.
Polygon is used with a clip-path
The clip-path CSS property creates a clipping region that defines what part of an element should be
displayed.
Anything inside the region is displayed, while anything outside is hidden.
8. COLOR FADE ON HOVER
We use CSS3 transitions
Applied on the element on a normal state
Easy way to make your links (or any other element) look nice
Compatible accross the board
-webkit-transition-property: color, background;
-webkit-transition-duration: 1s, 1s;
-webkit-transition-timing-function: linear, ease-in;
9. STYLE BROKEN IMAGES
Broken images can happen, whatever you do.
Using CSS, it is possible to style broken images and provide custom
error messages to your visitors.
Two facts about the way the <img> element behaves:
1. We can apply regular typography-related styling to the <img> element.
These styles will be applied to the alternative text, if it is displayed, and will not affect the working image.
2. The <img> element is replaced element, its appearance and dimensions are
defined by an external resource.
Because the element is controlled by an external source, the :before and :after pseudo-elements typically
shouldn’t work with it. However, when the image is broken and not loaded, these pseudo-elements can
appear.
Unfortunately, not all browsers handle broken images in the same
way.
For some browsers, even though the image is not displayed, the pseudo-elements
don't show up at all.
10. ATTRIBUTE SELECTORS
Attribute selectors are case-sensitive, and are written inside
brackets [ ]
There are different types of matches you can find with an attribute
selector, and the syntax is different for each.
Each of the more complex attribute selectors build on the syntax of
the exact match selector.
11. ATTRIBUTE SELECTORS
Selector empty or not:
div[data-attr='']
div:not([data-attr=''])
Attribute...
contains exact value: a[href="http://www.google.com"]
Starts with value: h3[rel^="external"]
Ends with value: h3[rel$="external"]
Attribute is within a space-separated list: [rel~="friend"]
Attribute is within a dash-separated list: [rel|="friend"]
Multiple attributes match: h3[rel="handsome"][title^="Important"]
12. COMMA-SEPARATED LISTS
Display an unordered list as a comma-separated list.
Can be usefull when having multiple items from a database that you
want to display as text without having to pre-format it
programmatically.
ul.styled, ul.styled > li{ display: inline; list-style: none; padding: 0; }
ul.styled > li:not(:last-child)::after { content: ","; }
ul.styled > li:last-child::after { content: "."; }
Use with CAUTION...
This may not be ideal for accessibility, specifically screen readers.
Copy/paste from the browser doesn't work with CSS-generated
content.
13. CREATING SHAPES USING CSS
Common shapes:
Square
Rectangle
Circle
Oval
Triangle
17. CSS FLUID SIZING
The viewport is tha area of your browser where actual content is
displayed, in other words your web browser without its toolbars and
buttons.
The units we use are vw, vh, vmin and vmax.
1 vw: 1/100th viewport width
1 vh: 1/100th viewport height
1 vmin: 1/100th of the smallest side
1 vmax: 1/100th of the largest side
1vmax equals 1vh in portrait mode
1vmax will equal 1vw in landscape mode
NOTE: IE11 uses vm instead of vmin. It does not support vmax.
18. CALC()
Native CSS way to do simple math right in CSS as a replacement for
any length value (or pretty much any number value).
It has four simple math operators:
add (+),
subtract (-),
multiply (*),
and divide (/).
Being able to do math in code is nice and a welcome addition to a
language that is fairly number heavy.
19. THANK YOU!
Robert Richelieu
Twitter: @azoblu3
LinkedIn: https://www.linkedin.com/in/robert-richelieu-6133a2aa/
Facebook: https://www.facebook.com/rrichelieu
Example
files: https://drive.google.com/open?id=1fumPPwRo1wvCKwOw5qQgVrenJnnchFJ5
Come talk to me! I don't bite!
Notas del editor
This is a CSS property for tables that, it seems to me, is well-supported, little known, and super useful. It changes the way that tables are rendered such that it gives you a sturdier, more predictable layout.
shape-outside property
Allows geometric shapes to be set, in order to define an area for text to flow around.
The shape must have dimensions specified.
Set the height and width of the element.
This will be used by the shape function to create a coordinate system that is used when wrapping text around the image.
The shape outside property provides functionality to create these shape:
Circle
shape-outside: circle(50%);
Ellipse
shape-outside: ellipse(50px 100px at 50% 50%);
Polygon
clip-path: polygon(0% 0%, 100% 0%, 50% 100%); shape-outside: polygon(0% 0%, 100% 0%, 50% 100%);
Circle
shape-outside: circle(50%);
The full notation for circle() is circle(r at cx cy) where r is the radius of the circle and cx and cy are the coordinates for the center of the circle.
If you omit them, the center of the image will be used as the default values.
Ellipse
shape-outside: ellipse(50px 100px at 50% 50%);
Ellipse is a variation of the circle where the item is elongated on either the horizontal or vertical axis.
The full notation for ellipse() is ellipse(rx ry at cx cy)
rx and ry are the radiuses for the ellipse and cx and cy are the coordinates for the center of the ellipse.
Polygon
clip-path: polygon(0% 0%, 100% 0%, 50% 100%); shape-outside: polygon(0% 0%, 100% 0%, 50% 100%);
The polygon function provides an unlimited range of shapes.
The full notation for polygon() is polygon(x1 y1, x2 y2, …)
each pair specifies the x & y coordinates for a vertex of the polygon. To use the polygon() function you must specify a minimum of 3 pairs of vertex.
Polygon is used with a clip-path.
The clip-path CSS property creates a clipping region that defines what part of an element should be displayed.
Anything inside the region is displayed, while anything outside is hidden.
* Easy way to make your links (or any other element) look nice
* Compatible accross the board
* We use CSS3 transitions
* Applied on the element on a normal state
-webkit-transition-property: color, background; -webkit-transition-duration: 1s, 1s; -webkit-transition-timing-function: linear, ease-in;
Broken images can happen, whatever you do.
Using CSS, it is possible to style broken images and provide custom error messages to your visitors.
Two facts about the way the <img> element behaves:
We can apply regular typography-related styling to the <img> element.
These styles will be applied to the alternative text, if it is displayed, and will not affect the working image.
The <img> element is replaced element, its appearance and dimensions are defined by an external resource.
Because the element is controlled by an external source, the :before and :after pseudo-elements typically shouldn’t work with it. However, when the image is broken and not loaded, these pseudo-elements can appear.
Selector empty or not:
div[data-attr=''] & div:not([data-attr=''])
Attribute...
contains exact value: a[href="http://www.google.com"]
Starts with value: h3[rel^="external"]
Ends with value: h3[rel$="external"]
Attribute is within a space-separated list: [rel~="friend"]
Attribute is within a dash-separated list: [rel|="friend"]
Multiple attributes match: h3[rel="handsome"][title^="Important"]
Selector empty or not:
div[data-attr=''] & div:not([data-attr=''])
Attribute...
contains exact value: a[href="http://www.google.com"]
Starts with value: h3[rel^="external"]
Ends with value: h3[rel$="external"]
Attribute is within a space-separated list: [rel~="friend"]
Attribute is within a dash-separated list: [rel|="friend"]
Multiple attributes match: h3[rel="handsome"][title^="Important"]
Display an unordered list as a comma-separated list.
Can be usefull when having multiple items from a database that you want to display as text without having to pre-format it programmatically.
Use with CAUTION...
This may not be ideal for accessibility, specifically screen readers.
Copy/paste from the browser doesn't work with CSS-generated content.
Common shapes:
Square
Rectangle
Circle
Oval
Triangle
It's interresting to note that when 2 borders meet, they do so at an angle, allowing us to create triangles!
Triangle Up:
#triangle-up { border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; width: 0; height: 0; }
Triangle Down:
#triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; }
The difference between box-shadow and filter: drop-shadow() really boils down to the CSS box model: one sees it and the other disregards it.
It's annoying, but makes sense. CSS uses a box model, where the element's edges are bound in the shape of a rectangle. Even in cases where the shape of the element does not appear to be a box, the box is still there and that is was box-shadow is applied to.
Filters are not bound to the box model. That means the outline of our triangle is recognized and the transparency around it is ignored so that the intended shape receives the shadow.
The viewport is tha area of your browser where actual content is displayed, in other words your web browser without its toolbars and buttons.
The units we use are vw, vh, vmin and vmax.
vw: 1/100th viewport width
vh: 1/100th viewport height
vmin: 1/100th of the smallest side
vmax: 1/100th of the largest side
1vmax equals 1vh in portrait mode
1vmax will equal 1vw in landscape mode
IE9 uses vm instead of vmin. It does not support vmax.
calc() is a native CSS way to do simple math right in CSS as a replacement for any length value (or pretty much any number value). It has four simple math operators: add (+), subtract (-), multiply (*), and divide (/). Being able to do math in code is nice and a welcome addition to a language that is fairly number heavy.