Показаны сообщения с ярлыком css. Показать все сообщения
Показаны сообщения с ярлыком css. Показать все сообщения

Как отключить выделение текста на CSS

пятница, 27 марта 2015 г.

0 коммент.
Для того, чтобы отключить выделение текста на станице можно использовать селектор со следующим наборов правил:

.disable-selection {
     -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* Internet Explorer */
   -khtml-user-select: none; /* KHTML browsers (наподобие Konqueror) */
  -webkit-user-select: none; /* Chrome, Safari и Opera */
  -webkit-touch-callout: none; /* Отключить вызовы в Android и iOS */
}

CSS лоадеры/спиннеры - SpinKit

вторник, 17 декабря 2013 г.

0 коммент.
Индикаторы загрузки или состояния выполнения часто используются в интерфейсах, например, когда выполняется ajax-запрос или другое длительное действие. Нужны они для того, чтобы пользователь понимал, что процесс идет.

SpinKit  - набор лоадеров/спиннеров (от англ. loader, spinner), которые сделаны на чистом html и css.

Адаптивные шаблоны email писем с CSS-фреймворком Ink

пятница, 8 ноября 2013 г.

0 коммент.
На сегодняшний день использование CSS-фреймворков в верстке сайтов стало крайне популярным. Теперь же настало время и CSS-фреймворков для шаблонов писем. Основное удобство - корректная работа на всех устройствах и в большинстве почтовых клиентов.
Ink - тот самый адаптивный фреймворк, призванный облегчить жизнь разработчикам при верстке email-шаблонов.

Buttons: CSS-библиотека для создания кнопок

пятница, 21 июня 2013 г.

0 коммент.
Buttons - CSS-библиотека для быстрого и удобного создания красивых, модных кнопок на сайте.

Magic: CSS-анимация

пятница, 14 июня 2013 г.

0 коммент.
Сегодня на многих сайтах можно увидеть различные виды css-анимации: повороты, слайдинг-эффекты и пр.

Magic - сборник различных видов css-анимации, который планируют регулярно пополнять.


Адаптивные и бесплатные шаблоны писем

понедельник, 3 декабря 2012 г.

1 коммент.
Адаптивные (responsive) шаблоны все чаще используются при верстке сайтов и это очень хороший знак и верное направление в развитии интернет-проектов. Но и email-рассылки эта тенденция не обходит стороной.

Ребята из Zurb.com сделали набор из пяти бесплатных адаптивных шаблонов для Email.


Генераторы префиксов CSS3 свойств для разных браузеров (вендорные префиксы)

четверг, 22 ноября 2012 г.

1 коммент.
Встала задача для одного проекта прописать css3 свойства под различные брузеры, которые все еще работают только с указанием вендорных префиксов: -o, -moz, -webkit и -ms. Сейчас, конечно, все адекватные современные и обновленные браузеры большую часть свойств воспринимают и без вендорных префиксов, но надо и учитывать, что какие-то пользователи могут работать на старых версиях.

Таким образом я решил поискать генераторы, которые из моих нормальных css3 свойств сделают версию css с префиксами. Нашел 3 адекватных генератора.

Для примера я сделал совершенно не имеющий практического применения кусок css стилей:

.my_block {
 box-shadow: 5px 5px 10px -5px black;
 background: linear-gradient(90deg, #444, black 50%);
 box-sizing: border-box;
 transform: rotate(15deg);
 animation: 3s colorcycle infinite alternate;
 border-radius: 2px;
}

Первый довольно адекватный генератор - Prefixr от одного из авторов NetTuts+.


Генератор спрайтов - Instant Sprite (Open Source, бесплатный)

пятница, 2 ноября 2012 г.

1 коммент.
Instant Sprite - прекрасный web-based генератор спрайтов, позволяющий добавить любое количество изображений простым перетаскиванием их на страницу (drag'n'drop).


ON/OFF переключатель на CSS3 (в стиле iOS и Android)

пятница, 27 июля 2012 г.

1 коммент.
Proto.io, сервис прототипирования мобильных интерфейсов, разработал генератор ON/OFF переключателя, который используется в мобильных ОС.

Переключатели создаются на чистом CSS3 и, кроме того, имеется возможность создавать "кастомные решения" самому.

Изображение: http://www.webresourcesdepot.com

Кроме того, имеются готовые стили переключателей, используемые в iOS4, iOS5 и Android.
P.S. переключатели не имеют доп. обработок на JS. Только чистый html и css3.

Требования: нет
Совместимость: все современные браузеры
Сайтhttp://proto.io/freebies/onoff/

AppJS - создание десктопных программ с помощью html, css, js

понедельник, 14 мая 2012 г.

0 коммент.
Компьютерные программы определенно имеют свои преимущества перед онлайн-средствами и утилитами. Такие как - скорость работы, возможность работы с файловой системой, работа в фоне, уведомления и пр.

Однако для веб-программистов всегда довольно сложно браться за написание десктопных программ с помощью не-веб языков программирования, хотя есть и умельцы, которых это не пугает.

AppJS  дает отличную возможность писать десктопные приложения, используя веб-технологии (html, css, js).


CSS3PIE, opacity

пятница, 23 сентября 2011 г.

0 коммент.
Чтобы пользователи Internet Explorer могли видеть все красоты CSS3, был написан скрипт CSS3PIE, который как раз и позволяет использовать свойства border-radius, box-shadow и другие.
Так вот если у блока есть свойство opacity и к нему применить CSS3PIE - свойство opacity может не срабатывать. Выход есть довольно простой - для блока добавить еще свойство -pie-background в rgba формате
Пример:


.some_class{
background-color: #000000;
opacity: 0.4;
-pie-background:rgba(0,0,0,0.4); /*четвертый параметр отвечает за opacity*/
}
 
Эта проблема характерна для IE7.

Как отключить подсвечивание input-полей формы при клике в Chrome?

среда, 15 сентября 2010 г.

0 коммент.
Чтобы поля при клике на них не подсвечивались, надо в css добавить следующее:

input, textarea{
   outline-width:0;
}

Как отключить изменение размера textarea в google chrome?

1 коммент.
Очень просто можно отключить ресайзинг textarea в Google Chrome.
В css добавляете


textarea{
  resize: none;
}

CSS3 + IE6-8 = CSS3PIE

вторник, 13 июля 2010 г.

0 коммент.
Часто веб-разработчиков расстраивает отсутствие интересных и полезных функциональных вещей в IE6-8. Например, таких как - border-radius, border-shadow и другие.
Чтобы этот функционал стал доступен в IE поможет CSS3PIE

Представляет из себя .htc файл. Подрбности использования можно узнать на сайте.
Полный список функционала:

  • border-radius
  • box-shadow
  • border-image
  • несколько фоновых изображений
  • linear-gradient как фоновое изображение

Сайт Progressive Internet Explorer

Грамотное обтекание картинки текстом (overflow: hidden)

понедельник, 26 апреля 2010 г.

0 коммент.
В замечательной статье про overflow:hidden написано про использование этой связки.
Что бы создать такую верстку

или такую
всего навсего необходимо для текста (в первом случае и для кнопки во втором) задать overflow: hidden и (чтобы  IE6 понимал) zoom:1, а для картинки (в первом случае и поля ввода во втором) float: left;
И будет прекрасно работать во всех браузерах.

Cжатие CSS кода

четверг, 29 ноября 2007 г.

0 коммент.
Кодга вы пишите сайт, то часто приходится выбирать между красивым дизайном и функционалом сайта. Всем хочется что бы была хорошя навигация, красивый дизайн и что бы были функциональные возможности. Очень хорошим свойством сайта является его быстрая загрузка. Никто не хочет ждать долго, поэтому я могу предложить один из вариантов реализации сжатия css файлов для более быстрой загрузки страниц.
Ведь каждый программист пишет в коде комментарии, заметки и когда используем стандартные методы сжатия файлов, то получаем в итоге исходный код, очищенный от комментариев, пустых строк и лишних пробелов. Это конечо хорошо, но когда встает вопрос о дополнии или изменении кода css-файлов, то тут уже возникает сложность - комментарии удалены, заметок нет. Приходится долго вспоминать и тратить драгоценное время.
Итак, для сжатия css кода, но в то же время не изменяя его, можно использовать средства PHP.
Первую часть кода пишем в самом начале CSS - файла, вторую часть пишем в самом конце.


<?php
  header('Content-type: text/css'); //указываем, что это именно css
  ob_start("compress"); //включаем буферизацию вывода для дальнейшего сжатия
  function compress($buffer) {
    // удаляем комментарии
    $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
    // удаляем отступы, пробелы, пустые строки.
    $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
    return $buffer;
  }
?>


и к конце css-файла пишем

<?php ob_end_flush();?>

Если хотите сослаться на файл, используя имя , например, style.css и у вас есть распарсенный php код, то можете использовать следующий метод в файле .htaccess


<Files screen.css>
 SetHandler  application/x-httpd-php 
</Files>

Градиент средствами JavaScript

суббота, 21 июля 2007 г.

4 коммент.
Постоянная проблема с нарезанием однопиксельной полоски на бэкграунд сайта?
Дело в том, что есть один вариант создания градиента на страничке, например:
<div style="height: 100%; width: 100%; text-align: center;

filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,

startColorStr=#000000, endColorStr=#ffffff);">

<h1 style="color: white;">
Градиент на заднем плане будет работать только в IE.
</h1>

</div>
Но этот пример будет работать только в "Ослике". Но умные и безустали работающие программисты придумали сделать кросс-браузерный вариант. Правда средствами JavaScript, но лучше уж так =)) Так вот:
<body>

<script type="text/javascript"><!--//--><![CDATA[//><!--

function leftPad(x) {

return (x.length < 2) ? "0"+x : x;

}

function hex(x) {

return leftPad(x.toString(0x10).toUpperCase());

}

for (i=0; i<256; i++) {

var div = document.createElement("div");

div.style.backgroundColor = "#"+hex(i)+hex(i)+hex(i);

div.style.fontSize        = "0px";

div.style.lineHeight      = "0px";

div.style.height          = "2px";

document.body.appendChild(div);

}

//--><!]]></script>

</body>
Естественно найдено в сети по адресу http://www.getinfo.ru/

Copyright © 2010 WEB IT blog