public marks

PUBLIC MARKS from decembre with tags css-tricks & css

2016

CSS - IMAGE RATIO - Maintain Aspect Ratio Mixin | CSS-Tricks

by 2 others (via)
maintaining the assigned aspect ratio as it resizes. .sixteen-nine { position: relative; } .sixteen-nine:before { display: block; content: ""; width: 100%; padding-top: 56.25%; } .sixteen-nine > .content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

2014

2013

CSS - On :target | CSS-Tricks

The :target pseudo selector in CSS matches when the hash in the URL and the id of an element are the same.

CSS - CSS3 zone réservée aux onglets | CSS-Tricks

Pour un clic sur un onglet, masquer tous les panneaux, montrer celui qui correspond à l'onglet juste cliqué.

CSS - The Layered Look: Better Responsive Images Using Multiple Backgrounds | CSS-Tricks

The following is a guest post by Parker Bennett. Parker has written for CSS-Tricks before, in his article Crop Top dealing with the positioning of fluid images. This is a great follow up to that, presenting another option in the never-ending responsive images saga. It's also an interesting contrast to yesterday's post on responsive images - so you can see how very different the approaches to this problem can be.

CSS - Centering in the Unknown | CSS-Tricks

When it comes to centering things in web design, the more information you have about the element being centered and its parent element, the easier it is. So what if you don't know anything? It's still kinda doable.

CSS - Centering Percentage Width/Height Elements | CSS-Tricks

by 1 other (via)
If you know the exact width/height of an element, you can center it smack dab in the middle of its parent element easily with this classic trick: top and left set to 50% and negative margins half the width and height of the element. That's great if you know the width and height of the element you're trying to center, but what if they are percentages?

decembre's TAGS related to tag css-tricks

article +   background-image +   center +   centrer +   collection +   convert +   convertir +   css +   datauri +   demo +   design +   dev +   ebook +   flexbox +   font +   font@face +   free +   horizontal +   icon +   icone +   image +   javascript +   media:queries +   online +   percentage +   position +   pourcentage +   ratio +   resize +   selecteur +   selector +   svg +   tab +   target +   tool +   trucs +   tutorial +   tutoriel +