CSS3 книга с эффектом перелистывания страниц
CSS3 анимация перелистывания страниц
В буржунете я подсмотрел технику перелистывания страниц реализованную на CSS3. Очень эффектно! На основе этой техники я решил сделать свой пример демонстрацию такой CSS3 книги. Смотрим что получилось...
В буржунете я подсмотрел технику перелистывания страниц реализованную на CSS3. Очень эффектно! На основе этой техники я решил сделать свой пример демонстрацию такой CSS3 книги. Смотрим что получилось...
Текст с тенью css3 text-shadow примеры
CSS3 text-shadow 40 примеров текста с тенью
Как только современные браузеры начали боле менее корректно поддерживать свойство text-shadow тень текста на css3 - сразу же интерес к этому свойству вырос многократно. Достигаемый эффект действительно очень стильный, разнообразие теней ограничивается лишь фантазией веб мастера.
Пришло время и мне выложить свою "коллекцию" теней.
CSS3 свойство text-shadow добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно текста и радиус размытия. Свойство text-shadow может работать совместно с псевдоэлементами :first-letter(определяет стиль первого символа в тексте элемента, к которому добавляется) и :first-line(задает стиль первой строки форматированного текста).
Opera 9.5 поддерживает не более шести теней. Позже, это ограничение было снято. Обратите внимание, что опера окрашивает тени в неправильном порядке. Это было исправлено в Opera 10.5. Opera поддерживает максимум 6-9 параметров тени. Повышение этого значения, а также увеличение радиуса размытия свыше 100px сказывается на производительности браузера. Opera версии 9.5-10 использует отображение нескольких теней, как в CSS 2.
Safari до версии 3.2 включительно поддерживает только один параметр тени, остальные игнорируются. В версии 4.0 работает уже множество теней.
Браузер Internet Explorer ни в одной версии не понимает свойство text-shadow. Взамен используется свойство filter: Shadow(параметры). К примеру, следующая конструкция {filter: Shadow(Color=#666666, Direction=45, Strength=4);} задает цвет тени (#666666), её направление (45° от вертикали) и величину смещения (4 пиксела).
Как только современные браузеры начали боле менее корректно поддерживать свойство text-shadow тень текста на css3 - сразу же интерес к этому свойству вырос многократно. Достигаемый эффект действительно очень стильный, разнообразие теней ограничивается лишь фантазией веб мастера.
Пришло время и мне выложить свою "коллекцию" теней.
CSS3 свойство text-shadow добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно текста и радиус размытия. Свойство text-shadow может работать совместно с псевдоэлементами :first-letter(определяет стиль первого символа в тексте элемента, к которому добавляется) и :first-line(задает стиль первой строки форматированного текста).
Opera 9.5 поддерживает не более шести теней. Позже, это ограничение было снято. Обратите внимание, что опера окрашивает тени в неправильном порядке. Это было исправлено в Opera 10.5. Opera поддерживает максимум 6-9 параметров тени. Повышение этого значения, а также увеличение радиуса размытия свыше 100px сказывается на производительности браузера. Opera версии 9.5-10 использует отображение нескольких теней, как в CSS 2.
Safari до версии 3.2 включительно поддерживает только один параметр тени, остальные игнорируются. В версии 4.0 работает уже множество теней.
Браузер Internet Explorer ни в одной версии не понимает свойство text-shadow. Взамен используется свойство filter: Shadow(параметры). К примеру, следующая конструкция {filter: Shadow(Color=#666666, Direction=45, Strength=4);} задает цвет тени (#666666), её направление (45° от вертикали) и величину смещения (4 пиксела).
Блочные HTML CSS шаблоны макеты каркасы
40 готовых HTML CSS Кроссбраузерных макетов шаблонов каркасов без хаков для основы блочной вёрстки сайта любой конфигурации
Самое главное при вёрстке сайта это создать или найти каркас своего будущего сайта, куда будет вложено уже всё последующее заполнение. Каркас должен быть кроссбраузерным(одинаково выглядеть во всех браузерах), лёгким, простым.
Опытному верстальщику не составит труда сверстать такой каркас, а вот у начинающих возникают серьёзные проблемы и куча вопросов типа - вроде делаю всё правильно, а не получается как хочется, то там что-то вылезет, то тут не влезет. Давным давно мне попался сайт с такими шаблонами каркасами и я решил, что нужно всё-таки оформить и выложить эти шаблоны, так как мне когда-то очень не хватало вот таких каркасов.
Самое главное при вёрстке сайта это создать или найти каркас своего будущего сайта, куда будет вложено уже всё последующее заполнение. Каркас должен быть кроссбраузерным(одинаково выглядеть во всех браузерах), лёгким, простым.
Опытному верстальщику не составит труда сверстать такой каркас, а вот у начинающих возникают серьёзные проблемы и куча вопросов типа - вроде делаю всё правильно, а не получается как хочется, то там что-то вылезет, то тут не влезет. Давным давно мне попался сайт с такими шаблонами каркасами и я решил, что нужно всё-таки оформить и выложить эти шаблоны, так как мне когда-то очень не хватало вот таких каркасов.
Стильный правильный PHP редирект с таймером обратного отсчёта
Как сделать правильный PHP редирект с таймером обратного отсчёта на javascript
Когда я узнал, что мой домен WebOstrovok.ru оказался вовсе и не мой - возникла необходимость срочно клонировать сайт и делать все уже правильно.
Новый сайт создан и теперь на старый нужно поставить перенаправление и оно должно быть правильным.
Проще всего переадресацию можно сделать с помощью мета тега Refresh или с помощью javascript.
Минусом переадресации тегами и javascript является то, что в случае переезда сайта, смены домена, или перемещении файлов, статья для пользователя остаётся той же, а для поисковых систем - нет. Поэтому при переезде сайта категорически нельзя использовать эти методы, так как основной сайт выпадет из результатов поиска из-за своей пустоты, а новый сайт не попадёт в результаты из-за "плагиата". Поисковые системы оценят сайт как плагиатчик и этот сайт украл содержание с вашего предыдущего сайта. Плагиатчики значительно опускаются в результатах поиска. Не делайте ошибок.
Мне захотелось сделать перенаправление пооригинальнее и покрасивее, думаю, что мне это удалось.
Когда я узнал, что мой домен WebOstrovok.ru оказался вовсе и не мой - возникла необходимость срочно клонировать сайт и делать все уже правильно.
Новый сайт создан и теперь на старый нужно поставить перенаправление и оно должно быть правильным.
Проще всего переадресацию можно сделать с помощью мета тега Refresh или с помощью javascript.
Минусом переадресации тегами и javascript является то, что в случае переезда сайта, смены домена, или перемещении файлов, статья для пользователя остаётся той же, а для поисковых систем - нет. Поэтому при переезде сайта категорически нельзя использовать эти методы, так как основной сайт выпадет из результатов поиска из-за своей пустоты, а новый сайт не попадёт в результаты из-за "плагиата". Поисковые системы оценят сайт как плагиатчик и этот сайт украл содержание с вашего предыдущего сайта. Плагиатчики значительно опускаются в результатах поиска. Не делайте ошибок.
Мне захотелось сделать перенаправление пооригинальнее и покрасивее, думаю, что мне это удалось.
Мини Курс Основы CSS Часть 1
Что такое CSS
Цель данного мини курса - дать Вам базовые знания CSS, которые помогут Вам создавать свои первые web-страницы или редактировать уже готовые шаблоны своих web-сайтов!.
В первую часть мини курса вошли уроки:
Урок 1 Начало: Вы узнаете об основах базовой модели CSS и о том, какие коды необходимо использовать для CSS в HTML-документе.
Урок 2 Фон и цвет в CSS: В этом уроке вы научитесь, как использовать цвета и фон на ваших web-сайтах.
Урок 3 Шрифты в CSS: Управление шрифтами с помощью CSS.
Урок 4 Текст в CSS: В этом уроке вы увидите возможности CSS при форматировании(отображении) текста.
Мини Курс Основы CSS Часть 2
Что такое CSS
Возможно, вы уже слышали о CSS, но не знаете, что это такое. В этом мини курсе вы узнаете, что такое CSS и что он может сделать для вас.
Вторая часть мини курса - Цель данного мини курса - дать Вам базовые знания CSS, которые помогут Вам создавать свои первые web-страницы или редактировать уже готовые шаблоны своих web-сайтов!.
Во вторую часть мини курса вошли уроки:
Урок 5: Ссылки в CSS
Урок 6: Идентификаторы(id) и классы(class) в CSS
Статья в процессе написания, добавляются новые уроки.
Мини Курс Основы HTML Часть 1
Что такое HTML?
HTML это "родной язык" вашего браузера (программы просмотра вэб-страниц).
Цель данного мини курса - дать Вам базовые знания HTML, которые помогут Вам создавать свои первые web-страницы или редактировать уже готовые шаблоны своих web-сайтов!
В первую часть мини курса вошли уроки:
Урок 1: Начало:В этом первом уроке мы кратко представим вам утилиты, которые нужны для создания web-сайта.
Урок 2: Что такое HTML-тэги: Теперь вы готовы начать изучение HTML-тэгов.
Урок 3: Создайте свой первый сайт: Вы уже через несколько минут создадите свой первый web-сайт.
Урок 4: Повторим то, что уже знаем: Всегда начинайте работу с базового шаблона.
Урок 5: Ещё немного HTML-тэгов: Теперь выучим семь новых тэгов.
Урок 6: Атрибуты: В некоторых тэгах вы можете вводить дополнительную информацию. Такая дополнительная информация называется "атрибут".
Мини Курс Основы HTML Часть 2
Мини Курс "Основы HTML" Часть 2
HTML это "родной язык" вашего браузера (программы просмотра вэб-страниц).
Вторая часть мини курса - Цель данного мини курса - дать Вам базовые знания HTML, которые помогут Вам создавать свои первые web-страницы или редактировать уже готовые шаблоны своих web-сайтов!
Во вторую часть мини курса вошли уроки:
Урок 7: Ссылки в HTML: В этом уроке вы научитесь создавать ссылки.
Урок 8: Изображения в HTML: Этот урок поможет вам правильно работать с картинками на ваших web-сайтах.
Урок 9: Таблицы в HTML: Построение таблиц в HTML может показаться сложным на первый взгляд, но, если вы не будете торопиться, это окажется строго логичным - как и всё в HTML.
Урок 10: Продолжаем изучать таблицы: Ещё атрибуты для построения таблиц.
Урок 12: Публикация сайта: Что необходимо для публикации своего web-сайта.
Урок 13: Web-стандарты и проверка HTML: Стандарты для правильного отображения вашего web-сайта во всех браузерах.