Сайт

CSS3-свойства text-shadow, box-shadow и border-radius, JQuery и “солнце”

0

В предыдущей статье я описал CSS3-свойство “text-shadow” и дал несколько примеров его применения как самого по себе, так и в связке с JQuery.

Я ещё немного поэкспериментировал на эту тему и у меня получился пример под названием “Тень, отбрасываемая текстом в зависимости от положения “солнца”, которое управляется мышкой”. Звучит сложно, проще увидеть.

Ну а теперь разберём, как сделан этот пример. (далее…)

Popularity: 1% [?]

CSS-свойство text-shadow, его применение и эффекты.

Ещё в версии CSS2.1 появилась возможность создавать эффект тени у текста с помощью свойства text-shadow. Но на тот момент практически ни один браузер его не поддерживал. И только с активным внедрением поддержки CSS3 эту тень у текста научились отображать практически все современные браузеры. Кроме Internet Explorer’а, который даже в 9-й версии (последней на данный момент) этого не умеет.

Вот формат параметров свойства: text-shadow: x y z  color, x y z  color, …; где x и y – смещение тени в пикселях по горизонтальной и вертикальной оси соответственно, z – радиус размытия тени, color – цвет тени. К тексту можно применить сразу несколько эффектов тени, указывая параметры через запятую. Это позволяет, комбинируя тени разного цвета, с разным смещением, добиваться эффектов трёхмерности текста, вдавленности, свечения и других. Для наглядного представления некоторых возможностей применения text-shadow и эффектов, которые можно с его помощью получить, я подготовил страничку с несколькими примерами. Пример 1 демонстрирует простейший вариант его применения: (далее…)

Popularity: 1% [?]

Начинающим изучать HTML, CSS3 и JQuery – полезные книги и сайты.

Посмотрел я на свои сайты с фотографиями и решил, что смотрятся они очень уж несовременно, как-то совсем статично и по-простецки. Надо бы переделать, освежить и вдохнуть в них новую жизнь и силы. И решил я задаться этой благородной целью самостоятельно. А что для этого надо? Да самую малость – изучить web-программирование. Не сказать, что я вообще не был знаком с html, таблицами стилей и javascript, но весьма поверхностно.  Теперь же я обложился книгами и полезными сайтами и окунулся в это дело с головой. И стало так интересно, аж жуть! Столько всего мне открылось, что не могу не поделиться своими находками с такими же, как и я, начинающими веб-программистами (а может что-то пригодится и опытным :) ).

Для начала перечислю книжки, по которым я начал своё обучение:

1. В. Дунаев. HTML, скрипты и и стили. 3-е издание.  JavaScript Издательство BHV, 2011.

Вообще-то, на некоторых форумах и сайтах 2-е издание этой книги поругивают, но это (3-е) мне лично понравилось. Всё достаточно подробно и понятно описано и разложено по полочкам. Как учебник для начинающего web-программиста самое то, что нужно.

2. Робин Никсон. Создаём динамические веб-сайты с помощью PHP, MySQL и JavaScript. Издательство O’Reilly, 2009. Русское издание – Издательство “Питер”, 2011.

Тоже  весьма неплохая книга для начинающих, посвященная только программированию на языках PHP (особенно в применении в базам данных MySQL) и JavaScript. Важно отметить, что эта книга от издательства O’Reilly, известного своими качественными книгами технической тематики.

3. Эрл Каслдайн, Крэйг Шарки. Изучаем JQuery. Новый стиль программирования на JavaScript. SitePoint, 2010. Русское издание - Издательство “Питер”, 2011.

Это моя самая любимая книжка из всех трёх. А всё потому, благодаря ей я познакомился, понял и изучил JQuery! И влюбился в него! Правда, чесслово!

Пара слов для тех, кто не в курсе, что это такое (я и сам был таким всего несколько месяцев назад, книжку я купил практически наугад, только потому, что слово JQuery мне часто встречалось в связи с веб-программированием). JQuery – это бесплатный, свободно распространяемый, написанный на JavaScript (JS) набор готовых функций (иначе говоря, фреймворк, framework) и предназначенный для использования при программировании на нём же. При этом с помощью всего пары-тройки строк JS-программы можно управлять содержимым сайта и создавать различные визуальные динамичные эффекты. В общем, создателям JQuery нужно памятник ставить.

Кроме книг, лучший источник информации – это сам Интернет. Вот несколько полезных сайтов, которые стали для меня источником новых знаний и умений:

1. JQuery.com - ну, конечно же, официальный сайт JQuery (англ.) Можно скачать последние и предыдущие версии пакета. Подробнейшая документация с примерами, но на английском.

2. Vremenno.Net - несмотря на странное, но запоминающееся название, сайт посвящён сайтостроительству и на нем можно найти много полезных статей на русском.

3. CSS-Tricks - ещё один полезный сайт (на англ.): обучающие статьи, форумы, полезные кусочки кода (snippets) и большие куски его же. И не только на CSS3, но и на JS+JQuery, и на PHP. В общем, рекомендую.

4. Codrops -  (на англ.) название можно перевести как “капли кода”. И я должен сказать, что каждая “капля кода” с этого сайта – настоящая жемчужина! Потрясающие визуальные эффекты, сделанные только с помощью CSS3 и JQuery, с подробным описанием, как это сделано. Или готовые плагины (встраиваемые программы) для JQuery с описанием, как применять. Классный сайт! Очень-очень рекомендую.

5. W3School Online -  (на англ.) несмотря на название, это больше справочник с примерами по языкам для сайтостроительства. Весьма полезный.

Понятно, что это очень и очень неполный список книг и сайтов, где можно почерпнуть полезную информацию. Но это только начало. Буду находить новые сайты или читать книги – буду пополнять список.

А пока, можно посмотреть, как мне удалось преобразить один из своих сайтов с помощью знаний из тех источников, что я указал выше: www.broslavets.ru

Хочу обратить внимание, что при просмотре сайта браузерами Firefox, Chrome, Opera, Sahari на сайте равноправно работают две технологии CSS3 и JQuery. Но в Internet Explorer, в связи с его слабой поддержкой CSS3 (даже в 9-й версии, и это во втором десятилетии 21-го века!!!) все эффекты, создаваемые при помощи CSS3 в других браузерах, создаются с помощью JQuery.

 

Popularity: 1% [?]

Моё поздравление с Новым годом на JQuery и CSS3

Посмотреть моё поздравление с НГ можно здесь.

Поздравление сделано с активным применением JQuery и CSS3. Ну, об этом я надеюсь подробно написать в последующих записях.

Кстати, очень рекомендую при просмотре поздравления, во избежании  торможения использовать последние версии браузеров. Особенно это касается Internet Explorer версий 8 и 7 (про IE 6 вообще уже пора забыть) – тормоза просто катастрофические. Что же касается 9-й версии Internet Explorera, то она  работает уже очень и очень прилично и шустро, почти как Google Chrome – реально самый быстрый браузер.

Но это мы всё поподробенее разберём уже в следующем году.

До следущего года! :-)

Popularity: 1% [?]

Новая рубрика – Мои лучшие фотографии на Photosight.ru

Все артисты  выпускают когда-нибудь сборники своих произведений (даже если это творчество длится всего-то полдня и интересно узкому кругу семьи, включая домашних животных), которые обычно называются “The Best of…” – музыканты – на компакт-дисках, актёры – сборники лучших фильмов на DVD, художники – альбомы репродукций, ну и т.д.

Вот я и подумал, а чем я хуже? Фотография – это тоже творчество, продуктов этого творчества, т.е. фотографий, у меня накопилось уже довольно много. Так почему бы не сделать что-то типа подборки самых удачных фотографий?

Но вот проблема – я, как автор, субъективен, и мне нравятся если не все мои фотографии, то очень многие, и выбрать из них лучшие я сам затрудняюсь.

Но мне и не надо мучиться над проблемой выбора! Для этого уже давно существуют фотосайты, где фотографы выкладывают свои фотографии и другие фотографы или просто зрители их оценивают, критикуют и комментируют. Самый знаменитый, популярный и авторитетный из подобных сайтов на территории российского интернета (нет, не угадали, не Flikr.com) – это Photosight.ru. А я публикую там свои фотографии уже почти 10 лет, с марта 2001 г.!

Так почему бы не отобрать те из них, что были неплохо оценены фотосайтовцами и не собрать в отдельной рубрике?

Вот и появилась рубрика “Мои лучшие фото на Фотосайт.ру / The Best of me at Photosight.ru”, в которой я буду публиковать фотографии, получившие, на мой взгляд, достойную оценку фотосайтовцев.

И первая из них – в следующей записи.

Popularity: 2% [?]

Go to Top
Яндекс.Метрика