background preloader

Entrainement aux sélecteurs CSS - CSS Diner

Entrainement aux sélecteurs CSS - CSS Diner
Related:  TUTORIELS

PlugIns jQuery - jQuery UI you-dont-need/You-Dont-Need-JavaScript: CSS is powerful, you can do a lot of things without JS. CSS3 поддержка в браузерах 5 октября 2012 в 16:27 Хотя CSS3 ещё не является стандартом W3C, последние версии браузеров имеют его частичную поддержку. Можно встретить примеры реализующие те или иные свойства CSS3. Но вместе с восторгом многих не покидает также чувство опасения. Шпаргалка Расшифровка обозначений UPD: grokru рекомендует Caniuse.com На сайте можно найти недостающую и свежую информацию. Только зарегистрированные пользователи могут оставлять комментарии. WTF, HTML and CSS? 5 Steps to Drastically Improve Your CSS Knowledge in 24 Hours You’ve been coding for a while now and know your way around a CSS file. You’re certainly no master, but with enough fiddling you can get where you want to go. You’re wondering though if you’ll ever get past that point where CSS is such a struggle. The good news is that you can indeed get past that frustrating point where you know enough CSS to code a website, but lack the solid foundation that allows you to code without the annoyance of not exactly understanding how you’re going to get where you’re going, and this point is a lot closer than you think. 1. If you really want to have a solid understanding of how to use CSS to move HTML elements to where you want them to go, you absolutely must get a grip on positioning contexts. There are actually five position values that you should understand. You need to know and understand all five, but the big two that will really change the way you code are absolute and relative positioning. Resources To Get You There The Lowdown on Absolute vs. 2.

Progresser via une communauté de codeurs - Exercism.io The Ultimate Guide to Learning CSS CSS Layout Once you have the ability to target html elements for styling, layout is the next core concept to master. Layout involves manipulating how elements lay out on the page. Increasingly layouts can be done purely with CSS Grid and Flexbox, but for those who still must support older browsers, grid systems built using Flexbox or even floats are still useful. Getting Started With CSS Layout | Smashing Magazine An awesome guide for CSS newbies, but also for anyone who doesn’t feel like they’ve mastered CSS layout or haven’t been keeping up with all the latest developments in CSS Layout. The Ultimate Guide to Flexbox — Learning Through Examples | Free Code Camp CSS Grid has stolen a little bit of its thunder, but Flexbox was the biggest innovation in browser layout in a decade, and continues to be a key piece of modern layout techniques. Flexbox Froggy Wonderfully whimsical game that lets you practice your flexbox skills by positioning frogs on lilly pads.

Архитектура CSS — Веб-стандарты Мерой хорошего знания CSS для многих веб-разработчиков является то, насколько идеально ты можешь воссоздать в коде данный тебе макет. Ты не используешь таблицы и гордишься собой, когда сводишь к минимуму графику. Если ты действительно хорош, то работаешь с самыми новыми и лучшими техниками — вроде медиавыражений, переходов и трансформаций. Это правда, хорошие CSS-разработчики действительно всё это умеют. Что интересно, обычно мы не упускаем из вида эту сторону, когда дело касается других языков. Эти вопросы вполне естественны при оценке кода, и CSS здесь не должен быть исключением. Принципы хорошей архитектуры CSS CSS-сообществу редко удаётся прийти к договорённости, что и как нужно делать. Поэтому вместо того, чтобы разворачивать перед вами мой собственный список правил, я скажу, что нам стоит определиться с принципами. Мне кажется, что принципы хорошей архитектуры CSS не сильно отличаются от целей разработки хорошего ПО. Предсказуемость Повторное использование Поддержка Масштабируемость

Frosting Glass with CSS Filters The following is a guest post by Bear Travis, a Web Standards Engineer at Adobe. I'm a fan of how Adobe is pushing the web forward with new design capabilities, and doing it in a responsible way. CSS filters is a good example. They knew they were desired because Photoshop paved the way. They brought them to the web with a sensible syntax and they helped with both the spec and browser implementation. While filters such as contrast, saturate, and blur have existed in image editors for some time, delivering them on the web has historically required serving images with those filters already applied. Old School: Frosted Glass with Images The frosted glass effect has been kicking around the internet for a while; we even saw it here on CSS-Tricks back in 2008. Demo The HTML The markup is relatively simple. <article class="glass down"><h1>Pelican</h1><p>additional content... The CSS We first size everything to the viewport. The above CSS will create our blurred and lightened overlay. Notes Caveats

Related: