background preloader

CSS Checkbox Styles

CSS Checkbox Styles
Related:  More CSSФішки

Demo: Pure CSS speech bubbles The basic bubble variants This only needs one HTML element. For example, <p>[text]</p>. But it could be any element you want. The entire appearance is created only with CSS. Simple examples Design is directed toward human beings. Ivan Chermayeff It’s not what you look at that matters, it’s what you see. Henry David Thoreau Takes me longer to write up blog posts on experiments or projects than to create them in the first place. @necolas at 4:05 PM March 2nd 2010 More complex CSS3 examples Some more experimental speech bubbles that try to limit the damage in browsers lacking the necessary CSS3 support. It doesn’t matter what the first child element of this div is...but it does need a child element. This is a blockquote that is styled to look like a speech bubble This is a blockquote that is styled to look like a thought bubble No, Donny, these men are nihilists, there’s nothing to be afraid of. Walter Sobchak

* { box-sizing: border-box } FTW - Paul Irish One of my least favorite parts about layout with CSS is the relationship of width and padding. You’re busy defining widths to match your grid or general column proportions, then down the line you start to add in text, which necessitates defining padding for those boxes. And ‘lo and behold, you now are subtracting pixels from your original width so the box doesn’t expand. Ugh. If I say the width is 200px, gosh darn it, it’s gonna be a 200px wide box even if I have 20px of padding. So as you know, this is NOT how the box model has worked for the past ten years. Anyway, I have a recommendation for your CSS going forward: This gives you the box model you want. Browser support Due to browser support, this recommendation is only for projects that support IE8 and up. Is it safe to use? Totally. jQuery works pretty great with it (except this). One of my favorite use-cases that border-box solves well is columns. Performance Lastly on @miketaylr’s inquiry, I also tested perf overhead.

Голые пятницы #1 / Блог компании Wargaming.net Всем доброго времени суток. Сегодня мы поговорим о том, как красиво оформить выделенный текст, совладать с отступами в кнопках, прокачать скролл в мобильных браузерах, скрестить цвет текста с цветом границ, а также рассмотрим интересные новые единицы измерения. Новые единицы измерения Не так давно к плеяде единиц измерения CSS примкнуло новое семейство:vw (viewport width) — 1 процент от ширины окна браузера;vh (viewport height) — 1 процент от высоты окна браузера;vmin и vmax — выбирают среди vw или vh меньшее или большее значение. Зачем они нужны? Или поместить резиновый попап в центре страницы: Согласитесь, выглядит лаконично. Интересным примером использования новых единиц измерения поделился пользователь DonSinDRom. Противопоказания IE 9 признает обозначение «vm» вместо «vmin»;iOS7 может работать с «vh» с багами;Поддержка свойства «vmax» пока недостаточно полная для использования. Стилизация выделенного текста Всего парой строк кода мы можем изменить выделение текста на всем сайте:

Timed Notifications with CSS Animations A quick tip on how to create some simple timed notifications with CSS animations. The idea is to show a notification with a progress bar for a specific duration and then make it disappear. View demo Download source In today’s tip we’ll show you how to create a simple timed notification with CSS animations. The idea is to show a notification or alert for a specific duration and then make it disappear. We’ll use a little progress indicator to show how much time is left before the box disappears. You definitely saw it already somewhere, I discovered it on buysellads.com where timed notifications are shown i.e. after saving some settings. For the markup we’ll simply have a division with a message inside and with an additional division for the little progress bar: The notification box is going to have the classes tn-box and tn-box-color-1 which will be used for defining different colors. Then we define the style of the box: We’ll set the box to display: none and give it 0 opacity. And that’s all!

Css hack para Internet Explorer IE 6, IE 7, IE 8, IE 9, IE 10 e IE 11 Los diseñadores y maquetadores web, sufren de cambios de estado cuando tiene que probar y hacer funcionar bien una página Web con Internet Explorer. Hoy por hoy una web se debe ver bien con Explorer 8 o superior. Por fín podemos descartar el Internet Explorer 7 por el poco trafico que genera que es inderior al 1%. Como nota de humor os dejamos la infografía con los estados de ánimo al probar un diseño de una página Web. Ahora vamso a grano. 1. Para detectar la versión que está utilizando nuestro visitante, de este navegador, debemos usar los llamados comentarios condicionales. Los comentarios condicionales fueron creados por Microsoft para su navegador y sólo son soportados por éste. Este tipo de hack se sitúa entre las etiquetas <head> y </head>. <! IE Cualquier versión de Internet Explorer lt IE X Versiones inferiores a X lte IE X Versiones inferiores o iguales a X IE X Solo para la version X gte IE X Versiones superiores o iguales a X gt IE X Versiones superiores a X <! <! <! <! <! <! <! <! <!

Разбираемся с clip-path Одной из замечательных особенностей преподавания является то, что студенты приходят с самыми свежими идеями. В промышленной разработке мы, как правило, думаем над выполнением задачи и тем самым упускаем новые интересные методики. Шла первая неделя проекта в нашем учебном лагере. Зная ее предыдущий опыт в HTML и CSS, эта задача была полностью в ее компетенции, но я решил помочь ей в реализации этого эффекта. Введение в свойство clip-path Это свойство является частью стандарта, который находится в статусе Working draft и позволяет скрывать участки изображения по маске. Обратите внимание, чтобы использовать это свойство сейчас, необходимо указывать префикс -webkit. Работать с этим свойством просто, необходимо указать набор пар X и Y. Можно создать множество различных форм из окружностей, эллипсов, полигонов. Простой треугольник Эффект, показанный выше достигается с помощью одного элемента и примененного к нему свойства clip-path. Вау, давайте поподробнее Понял, отлично. Формы Окружности Эллипсы

Pure CSS speech bubbles Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. This tutorial contains various forms of speech bubble effect created with CSS 2.1 and enhanced with CSS3. No images, no JavaScript and it can be applied to your existing semantic HTML. The CSS file used in the demo page is heavily commented so that you can see which lines of code are responsible for each part of the effects. Demo: Pure CSS speech bubbles Support: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+. Progressive enhancement with pseudo-elements With HTML as simple as <div>Content</div> or <p>Content</p> you can produce speech bubble effects like this: Add a child element, for example, <blockquote><p>Quote</p></blockquote> and you can even produce speech bubble effects like this: I’d encourage you to adapt the examples to your needs and use any other associated elements available to you in your existing HTML document. Example code A note on progressive enhancement

internet explorer - IE 10 + 11: CSS transitions with calc() do not work

Related: