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
This is the slide deck I used in a workshop about CSS animations, transitions and transforms. My students study Interactive Multimedia Design at Thomas More Mechelen. More info at http://www.weareimd.be
This is the slide deck I used in a workshop about CSS animations, transitions and transforms. My students study Interactive Multimedia Design at Thomas More Mechelen. More info at http://www.weareimd.be
A university lecture for journalism students -- how to use the canvas element to add graphics and animation to Web pages. Updated April 2014. Basics for beginners. See also https://github.com/macloo/canvas
Drawing a Circle Three Ways: Generating Graphics for the WebCloudinary
Amy Cheng
Web Developer, New York Magazine
Drawing a Circle Three Ways: Generating Graphics for the Web
There are multiple ways to generate graphics for the web. In this talk, we’ll learn three ways create a circle: CSS, SVGs, the Canvas. Each approach has its advantages and disadvantages. Which one is best for mobile performance? Which one should I use to create visualizations based on real-time data? Which one is the best for personalized user interfaces?
We’ll answer these questions and explore how these technologies offer us possibilities of visual expressiveness on the web, across different form factors and platforms.
On these slides. I explain all the properties and values of CSS Cascade Style Sheet (CSS).
How to define CSS class or id. How to implement CSS on the HTML page.
A university lecture for journalism students -- how to use the canvas element to add graphics and animation to Web pages. Updated April 2014. Basics for beginners. See also https://github.com/macloo/canvas
Drawing a Circle Three Ways: Generating Graphics for the WebCloudinary
Amy Cheng
Web Developer, New York Magazine
Drawing a Circle Three Ways: Generating Graphics for the Web
There are multiple ways to generate graphics for the web. In this talk, we’ll learn three ways create a circle: CSS, SVGs, the Canvas. Each approach has its advantages and disadvantages. Which one is best for mobile performance? Which one should I use to create visualizations based on real-time data? Which one is the best for personalized user interfaces?
We’ll answer these questions and explore how these technologies offer us possibilities of visual expressiveness on the web, across different form factors and platforms.
On these slides. I explain all the properties and values of CSS Cascade Style Sheet (CSS).
How to define CSS class or id. How to implement CSS on the HTML page.
SVGo is a Go programming language library for generation of SVG. The talk discusses the design of the library, the concept of sketching in code, and the development of visualizations and tools.
Similar to Advanced CSS Tricks and Techniques (20)
2.Cellular Networks_The final stage of connectivity is achieved by segmenting...JeyaPerumal1
A cellular network, frequently referred to as a mobile network, is a type of communication system that enables wireless communication between mobile devices. The final stage of connectivity is achieved by segmenting the comprehensive service area into several compact zones, each called a cell.
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024APNIC
Ellisha Heppner, Grant Management Lead, presented an update on APNIC Foundation to the PNG DNS Forum held from 6 to 10 May, 2024 in Port Moresby, Papua New Guinea.
Meet up Milano 14 _ Axpo Italia_ Migration from Mule3 (On-prem) to.pdfFlorence Consulting
Quattordicesimo Meetup di Milano, tenutosi a Milano il 23 Maggio 2024 dalle ore 17:00 alle ore 18:30 in presenza e da remoto.
Abbiamo parlato di come Axpo Italia S.p.A. ha ridotto il technical debt migrando le proprie APIs da Mule 3.9 a Mule 4.4 passando anche da on-premises a CloudHub 1.0.
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptxBrad Spiegel Macon GA
Brad Spiegel Macon GA’s journey exemplifies the profound impact that one individual can have on their community. Through his unwavering dedication to digital inclusion, he’s not only bridging the gap in Macon but also setting an example for others to follow.
1.Wireless Communication System_Wireless communication is a broad term that i...JeyaPerumal1
Wireless communication involves the transmission of information over a distance without the help of wires, cables or any other forms of electrical conductors.
Wireless communication is a broad term that incorporates all procedures and forms of connecting and communicating between two or more devices using a wireless signal through wireless communication technologies and devices.
Features of Wireless Communication
The evolution of wireless technology has brought many advancements with its effective features.
The transmitted distance can be anywhere between a few meters (for example, a television's remote control) and thousands of kilometers (for example, radio communication).
Wireless communication can be used for cellular telephony, wireless access to the internet, wireless home networking, and so on.
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!
Editor's Notes
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.