Advanced CSS Tricks and Techniques

ADVANCED
CSS TRICKS &
TECHNIQUES
Robert Richelieu
Twitter: @azoblu3

FIXED TABLE LAYOUTS
* Not widely known
* Changes the way tables are rendered
* More predictable layout

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%);

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.

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.

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.

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;

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.

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.

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"]

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.

CREATING SHAPES USING CSS
Common shapes:
 Square
 Rectangle
 Circle
 Oval
 Triangle

 Square:
 #square { background-color: red; width: 100px; height: 100px; }
 Rectangle:
 #rectangle { background-color: red; width: 200px; height: 100px; }
 Circle:
 #circle { background-color: red; width: 100px; height: 100px; -moz-border-
radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }
 Oval:
 #oval { background-color: red; border-radius: 100px / 50px; height: 100px;
width: 200px; -moz-border-radius: 100px / 50px; -webkit-border-radius:
100px / 50px; }

 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; }

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.

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.

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!

Advanced CSS Tricks and Techniques

More Related Content

What's hot (8)

Similar to Advanced CSS Tricks and Techniques (20)

Recently uploaded (20)

Advanced CSS Tricks and Techniques

Editor's Notes