Ви вибрали записи за тегом: CSS | Блог








11
Липень
2011

CSS3 - 3 пряника. Два акордеони та одне цікаве анімаційне меню


Тут я запропоную посилання на ці три пряника. Як дістатися до вихідного коду - ви повинні знати :)

Акордеон

Цікаве анімаційне меню

Акордеон 2

пс. Якщо Ви переглядаєте цю публікацію з головної сторінки чи з сторінки категорій, тегів - вище наведені посилання не дієві. Отож, щоб подивитися на приклади - клікнувши по заголовку перейдіть на сторінку публікації :)


Переглядів: 988    Коментарів: 0    Рейтинг:



07
Липень
2011

Цікаве CSS3 меню


Цікаве меню на CSS3 і без жодної картинки


Переглядів: 732    Коментарів: 0    Рейтинг:



07
Липень
2011

Стрічки на CSS3


Цікаві стрічки на CSS3. Код і жодної картинки!


Переглядів: 779    Коментарів: 0    Рейтинг:



27
Квітень
2011

18 фонів на CSS3


18 різних текстур для оформлення фону сайту. Для створення фонів використані тільки властивості CSS3, що відкриває необмежені можливості для модифікації під будь-який дизайн.


Переглядів: 1420    Коментарів: 0    Рейтинг:



12
Квітень
2011

Розбивка текту на колонки за допомогою CSS 3


Цей варіант чудово підходить для газет. Раніше таку розбивку тексту у веб зробити було майже не можливо.

Поки це працює в браузерах Mozilla, Chrome, Safari, які підтримують -moz- і -webkit-


Розбивка текту на колонки за допомогою CSS 3

Переглядів: 807    Коментарів: 0    Рейтинг:



12
Квітень
2011

7 цікавих текстових ефектів на CSS 3


Раніше у веб таких ефектів можна було досягнути тільки за допомогою Фотошопу та вставки зображень. Але це додавало ваги сайту. Тепер же, ми можемо писати кодом те, що раніше малювали в Фотошопі.


У цій публікації представлю 7 текстових ефектів на css 3 з кодом, демо та вихідними файлами.


7 цікавих текстових ефектів на CSS 3

Переглядів: 834    Коментарів: 0    Рейтинг:



12
Квітень
2011

3 онлайн генератори CSS3 стилів


1. Генератор кнопок

2. Генератор градієнтів

3. Генератор (border radius, box shadow, text shadow, RGBA, @font-face, Multiple Columns, Box Resize, Bo Sizing, Outline, Transitions, Transform, Selectors, Gradients)


Переглядів: 938    Коментарів: 0    Рейтинг:



11
Квітень
2011

3 способи прискорити завантаження CSS на Вашому сайті


3 способи прискорити завантаження CSS на Вашому сайті

Спосіб перший

Додаємо до розширення css файлів .php



<link rel="stylesheet" type="text/css" media="screen" href="/style.css.php" />

На початку файла style.css.php пишемо наступний рядок:



<?php if(extension_loaded('zlib')){ob_start('ob_gzhandler');} header("Content-type: text/css"); ?>

В останньому рядку файла пишемо наступне:



<?php if(extension_loaded('zlib')){ob_end_flush();}?>

Спосіб 2

Редагуємо тільки початок файлу

Перейменовуємо файли, як і в попередньому способі та додаємо в початок кожного файлу наступний код:



<?php
ob_start ("ob_gzhandler");
header ("content-type: text/css; charset: UTF-8");
header ("cache-control: must-revalidate");
$offset = 60 * 60;
$expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";
header ($expire);
?>


Спосіб третій

Перейменовувати файли не потрібно. Ми створимо новий файл styles.php та підключимо його в шаблон



<link rel="stylesheet" type="text/css" media="screen" href="/styles.php" />

Код файлику styles.php:



<?php
header('Content-type: text/css');
ob_start("compress");
function compress($buffer) {
/* remove comments */
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
/* remove tabs, spaces, newlines, etc. */
$buffer = str_replace(array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $buffer);
return $buffer;
} /* Всі Ваші CSS файлики */
include('master.css');
include('typography.css');
include('grid.css');
include('print.css');
include('handheld.css');
ob_end_flush();
?>



Інформацію взято із сайту js-php.ru

Переглядів: 918    Коментарів: 0    Рейтинг:



01
Квітень
2011

CSS3 - Заокруглені кути та тінь під текстом


Заокруглені кути


div { border: 2px solid #434343; padding: 10px; background: #e3e3e3; -moz-border-radius: 10px; -webkit-border-radius: 10px; width: 500px; }


Тінь під текстом



h1 { text-shadow: #003471 2px 5px 2px; }


Переглядів: 826    Коментарів: 0    Рейтинг:



17
Січень
2011

Свої маркери у списку


Хочеться цікавішого. Отож.

ul li {
padding-left: 10px;
background: url(marker.gif) 0 0.5em no-repeat;
}

Переглядів: 650    Коментарів: 0    Рейтинг: