public marks

PUBLIC MARKS with tag css

January 2014

Vertical align anything with just 3 lines of CSS

by Spone
With just 3 lines of CSS (excluding vendor prefixes) we can with the help of transform: translateY vertically center whatever we want, even if we don’t know its height.

Plasma effects | mennovanslooten.nl

by sbrothier
I recently tried to recreate the famous plasma effect that was often used in the demo scene. Since I didn't know a lot about it and how to achieve it I had to do some research first. I thought I'd write a little bit about what the effect is and how I ended up implementing it.

Le Design Atomique – 24 jours de web

by srcmax
Nous allons dans cet article réfléchir à de nouvelles méthodes d'intégration pour écrire nos feuilles de style.

December 2013

Learn by Doing

by jdrsantos & 1 other
Learn by Doing No setup. No hassle. Just learning.

SVG Tabs (Using an SVG Shape as Template) | CSS-Tricks

by 84GHz
An excellent feature of SVG is that you can define a shape (or set of shapes) once, and then use it multiple times throughout a page. You can even apply different fills and filters and whatnot to the different versions. SVG templating, if you will.

Einfaches Dropdown oder elegantes Styling

by 84GHz
Eine moderne Website berücksichtigt mobile Endgeräte. In vielen Fällen setzen Webworker dafür auf CSS3-Media-Queries, bekannt unter dem Begriff »Responsive Design«. Auch die Navigation wäre einfach mit CSS zu gestalten, gäbe es da nicht das Problem mit der Hover-Funktion auf Touchscreen-Geräten.

November 2013

60fps scrolling using pointer-events: none | The CSS Ninja - All things CSS, JavaScript & HTML

by rvuong & 2 others
Paul Lewis did an interesting article a while back about avoiding unnecessary paints through disabling hover effects as the user scrolls, which is a great approach. The down side being managing all your hover states through a parent class.

60fps scrolling using pointer-events: none | The CSS Ninja - All things CSS, JavaScript & HTML

by srcmax & 2 others
Paul Lewis did an interesting article a while back about avoiding unnecessary paints through disabling hover effects as the user scrolls, which is a great approach. The down side being managing all your hover states through a parent class.

How to Create a Simple Multi-Item Slider

by mixher & 1 other
A tutorial on how to create a simple category slider with a minimal design using CSS animations and jQuery. The idea is to slide the items sequentially depending on the slide direction.