CSS
Get flash to fully experience Pearltrees
As the image below shows, the background color is painted inside the border box. In other words, it shows behind the borders. Note that this is different for non-tiled background images, for which the origin is the padding box . Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas.
CSS 101: Section 8.1 Box dimensions
CSS Grid Layout
W3C Working Draft, 2 April 2013 This version: http://www.w3.org/TR/2013/WD-css3-grid-layout-20130402/
Most good developers by now accept the fact that pixel-perfect cross-browser CSS is not only unnecessary , but also totally impossible. Of course, when we speak of the challenge of “cross-browser” CSS, we’re really saying “How can I make this work in Internet Explorer versions 6-8?” — because those are really the most problematic browsers. Although I’ve written before about cross-browser CSS , and I still stand by just about every word in that article, I thought I’d reiterate my feelings on this subject by providing what I feel is the best workflow for getting your CSS to be as efficient, hack-free, and maintainable as possible while providing as similar an experience in all supported browsers. Keep in mind that the recommendations here would likely only apply if you are developing projects with a high number of users on older versions of Internet Explorer.
Cross-Browser CSS Development Workflow
cssFx.js - CSS3 property polyfill - It's So Futuristic, Baby!
cssFx is a standalone polyfill that inserts the vendor-specific CSS3 properties necessary for old and new browsers. This saves you tons of time, maintenance, and bandwidth! Check it out: CSS Rules cssFx Generated Rules
box-sizing
This is an experimental technology Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes. Summary The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.
One of the joys of working with CSS is that you can basically write the code any way you want. Sure there are some basic rules you have to follow (like using brackets), but for the most part you can format your CSS code as elaborately or as plainly as you see fit. You can use this vast flexibility to improve the organization and usability of your working stylehseets before compressing them for production use. Regular Show It’s common to see CSS that looks like this:
The Art & Science of Folding CSS Code
A Whole Bunch of Amazing Stuff Pseudo Elements Can Do
Published by Chris Coyier It's pretty amazing what you can do with the pseudo elements :before and :after . For every element on the page, you get two more free ones that you can do just about anything another HTML element could do. They unlock a whole lot of interesting design possibilities without negatively affecting the semantics of your markup. Here's a whole bunch of those amazing things. A roundup, if you will 1 .
Все мы часто пользуемся свойством CSS border-style, и, думаю, что не ошибусь, предположив, что чаще всего мы используем значение solid — сплошная линия. Она и выглядит сплошной линией во всех браузерах, абсолютно одинаково. Остальные значения этого свойства используются веб-мастерами довольно редко, а многие, хоть и знают об их существовании, в жизни никогда их не применяли — как-то незачем. Ну, от силы значения “dashed” или “dotted”, и то не часто. Поэтому многие из нас не знают, что border выглядит по-разному в разных браузерах. Предлагаем ознакомиться с материалами статьи Луи Лазариса из IMPRESSIVE WEBS, в которой он проводит любопытное сравнение отображения данного свойства CSS в основных современных браузерах.
Как браузеры отображают различные стили CSS border?
При использовании свойств box-shadow или border-radius непосредственно на изображении, браузеры могут некорректно отображать заданные нами CSS стили, из-за чего внешний вид блока будет существенно отличаться от задуманного. Однако если использовать изображение в качестве фона, то этой проблемы можно запросто избежать. Из статьи вы узнаете, как с помощью jQuery сделать идеально закругленные углы у изображений, а так же какие еще способы оформления возможны с помощью таких свойств как box-shadow, border-radius и transition. Смотреть демо Проблема
Работа с изображениями при помощи CSS3
6 Useful CSS Button Recipes You Can Copy & Paste
CSS3 is completely changing the game for creating buttons on the web. Techniques that were once only possible with images are now easily executable with just a few lines of code. For this post we custom built six attractively styled CSS buttons for you to copy and paste right into your projects, zero attribution required.CSS хаки
Браузеры и стандарты. Вечная погоня. Из-за несоответствий стандартам, из-за разных способов рендеринга страниц большая часть времени веб-дизайнера уходит на то, чтобы загладить эти несоответствия (использовать хаки). В итоге, вместо эффективной работы, дизайнер вступает в противоестественные отношения с браузерами, теряя драгоценное время.Recently on Design Shack we featured an article titled “ 10 Rock Solid Website Layout Examples “, which broke down some common layouts into simple silhouette wireframes so you could easily apply them in your work. Today I’ve chosen three of these layouts and converted them to live, responsive web pages with some HTML and CSS. They’re all super simple and easy enough for many beginners to take on, plus we’ll be using an awesome framework to do the heavy lifting. Skeleton: A Boilerplate for Responsive Web Design In yet another recent article , I went over how to use the Skeleton Framework to build web pages that are “responsive”, meaning they respond well to just about any size browser window.
3 Rock Solid Website Layout Examples: Coded
The last few posts I’ve been working through the background and borders module for css3. So far we’ve looked at css backgrounds , simple borders, and rounded corners . Today I want to walk through the border-image property and close with a couple of miscellaneous properties around the boxes we’ve been talking about. Browser support: At the moment browser support for css border images is limited. The latest version of Chrome should support everything here. Safari, Firefox, and Opera should support border images only when the shorthand is used.