Хочу поделиться с вами ссылками на 5 интересных презентаций о JS библиотеках, AJAX, PHP и CSS. Это on-line слайд-презентации на английском языке, которые помогут вам лучше узнать интересующий вас язык программирования.
1. Ajax 101 | Workshop
Автор: | Знакомство с программированием на Ajax. Рассказывается о XMLHttpRequest, XML, JSON, JavaScript, HTML, CSS, Dom Scripting, Event Handling с примерами из библиотеки YUI.
Любишь новости музыки? Читай про шоу бизнес на сайте muzport.ru.
Eskhosting - лучший выбор вебмастеров!
2. Modular CSS
Автор: | Очень доходчивое объяснение как правильно организовать верстку с возможностью скрывать и отображать CSS правила для различных браузеров без применения каких-либо хаков.
3. Understanding the PHP Object Model
Автор: | Обзор объектоного моделирования на PHP, а также основы ООП: интерфейсы, классы и т.п.
4. jQuery in 15 minutes
Автор: | Знакомство с библиотекой jQuery за 15 минут. Кратко о возможностях этого популярного фреймворка.
5. JavaScript Library Overview
Автор: | Очень интересный обзор наиболее популярных JS библиотек (jquery, prototype, Scriptaculous) для веб-разработчиков.
Расскажите какой литературой пользуетесь вы во время работы? И как вы предпочитаете изучать новые языки программирования (читать книги, форумы и т.д.)?
Наверное, многие из вас видели рекламу нового телефизора , который “расширяет границы изображения” за счет подсветки за рамками экрана. Выглядит это так:
На мой взгляд, смотрится очень эффектно. Я решила реализовать этот эффект в Photoshop :)
Узнай коэффициент интеллекта бесплатно, пройди тест iq. Эскхостинг предоставляет лучший хостинг для блога! Домен в подарок! Предустановленный WordPress!
Исходная картинка (взята ):
Эта картинка у нас будет находится на слое 1 (Layer 1), но для работы нам потребуется ее скопировать на второй слой: выделяем Layer 1 и нажимаем Ctrl+C, затем Сtrl+V. Теперь у нас появился Layer 2:
Теперь нам необходимо расширить границы полотна, чтобы хватило место для “ауры”. Добавим по 50 пикселей по периметру:
нажимаем Alt+Ctrl+C, откроется окошко Canvas Size (размер полотна). Добавляем к ширине и высоте по 100 пикселей:
Теперь перейдем непосредственно к эффекту. Переходим к слою 1 и применим к нему эффект Shape Blur (он и сделает всю основную работую): выбираем в меню Filter -> Blur -> Shape Blur:
В появившемся окошке настроек Shape Blur: ставим радиус 40 и выбираем в качестве фигуры обыкновенный квадрат:
Вы сразу увидите как на рабочем полотне вокруг нашей картинки появилась подсветка:
Осталось только поработать со слоем 2: переходим на панели слоев к Layer 2 и делаем рамочку с помощью эффета Stroke.
Наверное, многие из вас видели рекламу нового телефизора , который “расширяет границы изображения” за счет подсветки за рамками экрана. Выглядит это так:
На мой взгляд, смотрится очень эффектно. Я решила реализовать этот эффект в Photoshop :)
Узнай коэффициент интеллекта бесплатно, пройди тест iq. Эскхостинг предоставляет лучший хостинг для блога! Домен в подарок! Предустановленный WordPress!
Исходная картинка (взята ):
Эта картинка у нас будет находится на слое 1 (Layer 1), но для работы нам потребуется ее скопировать на второй слой: выделяем Layer 1 и нажимаем Ctrl+C, затем Сtrl+V. Теперь у нас появился Layer 2:
Теперь нам необходимо расширить границы полотна, чтобы хватило место для “ауры”. Добавим по 50 пикселей по периметру:
нажимаем Alt+Ctrl+C, откроется окошко Canvas Size (размер полотна). Добавляем к ширине и высоте по 100 пикселей:
Теперь перейдем непосредственно к эффекту. Переходим к слою 1 и применим к нему эффект Shape Blur (он и сделает всю основную работую): выбираем в меню Filter -> Blur -> Shape Blur:
В появившемся окошке настроек Shape Blur: ставим радиус 40 и выбираем в качестве фигуры обыкновенный квадрат:
Вы сразу увидите как на рабочем полотне вокруг нашей картинки появилась подсветка:
Осталось только поработать со слоем 2: переходим на панели слоев к Layer 2 и делаем рамочку с помощью эффета Stroke.
Очень жалко, что этот трюк возможен (без использования JS) только в CSS3, т.к. уж очень удобно было бы им воспользоваться, чтобы отпугивать воров контента :) Смотрите сами:
На месте воришки, я бы задумалась прежде чем копировать контент :) Теперь, давайте посмотрим, как это делается.
Seo конкурс линкомаулия. Конкурс по продвижению сайтов.
На самом деле, все до ужаса просто. Чтобы реализовать такой трюк нам понадобиться псевдо-класс ::selection, который мы применим к абзацам текста:
Префикс -moz- необходим, чтобы трюк работал и в FF.
Таким образом, при выделении текста мышкой, он полностью закраситься в черный цвет. А чтобы оставить то самое “скрытое послание”, достаточно нужные слова заключить в какой-либо еще тег, например <span> и прописать правила “читабельности” текста. И тогда получаем следующее:
<style type="text/css"> p::selection { background:#000;color:#000; } p::-moz-selection { background:#000;color:#000; } p span::selection { background:#fff;color:#000; } p span::-moz-selection { background:#fff;color:#000; } </style> <p>Этот текст при выделении никто не увидит. <span>А этот текст увидят злостные воришки</span></p>
можно увидеть на сайте , просто выделите весь текст мышкой.
Спонсор месяца: мини-отели СПб - портал для туристов и владельцев отелей. Вчера, наверное, некоторым из вас пришлось увидеть страницу 403, вместо блога - это была необходимая мера, т
Очередной “Хабраэффект” снова “сложил” мой блог. А бывает и так, что он сам по себе “ложится”… Так продолжается уже больше 4х месяцев, что порядком достало
Спонсор месяца: Отели Петербург - гостиница Серебряный Век в центре.
Меньше года назад, Dave Hyatt, Dean Jackson и Chris Marrin предложили внедрить новые CSS возможности: анимация, трансформация и CSS-константы. Последнее реализовано разработчиками Webkit еще в июне. А вчера на их появилась заметка о том, что теперь в последней версии Webkit внедрена поддержка CSS-анимации.
Чтобы увидеть анимацию в действии установите и откройте . Вы должны увидеть как на фоне картинки падают листья.
Давайте теперь разберем как работает простейшая анимация.
Прописать правила анимации очень просто. В первую очередь, используйте @-webkit-keyframes.
@-webkit-keyframes bounce { from { left: 0px; } to { left: 200px; } }
Блок @-webkit-keyframes содержит правила для ключевых кадров, которые определяют саму анимацию. Движок анимации будет плавно интерполировать между ключевыми кадрами. В приведенном выше примере, анимация называется “bounce” и содержит 2 ключевых кадра: один, определяющий начальное положение кадра (блок "from") и второй, определяющий конечное положение (блок "to").
Прописав правила анимации, внедренить ее можно с использованием -webkit-animation-name и связанных с ним свойств.
Анимация будет применена для описанного выше блока div: мы указали имя анимации ("bounce"), установили ее продолжительность в 4 секунды, количество вызовов анимации - 10 раз и установили, чтобы каждая раз анимация двигалась в противоположных направлениях.
Теперь, рассмотрим , когда блок будет “покачиваться”, при этом меняя свой цвет и размеры. Для этого мы укажем в описании анимации несколько ключевых кадров и для каждого пропишем различные значения прозрачности, цвета и положения.
Ключевые кадры обозначены с использованием процентов от общей продолжительности анимации, всего мы обозначили 4 таких кадра. Правила "from" и "to" эквиваленты значениям "0%" и "100%" соотвественно.
CSS анимация - одно из дополнений к CSS, разработанных для Webkit, которое входит в список так называемых CSS эффектов. Цель внедрения - прежде всего, расширить возможности веб-разработчиков для реализации контента, более насыщенного графическими элементами и эффектами. Анимация сама по себе очень презентабельна, а значит имеет право стать частью привычных нам стилей. Разработанное решение позволяет вебмастерам создать полноценную анимацию, заменив огромные и тяжелые для восприятия коды на JavaScript.
Другая хорошая новость - Webkit теперь также поддерживает CSS эффекты и на IPhone!
Все вышеописаннные и некоторые другие правила и свойства . Отмечу, что т.к. данные эффекты релиазованы для WebKit, их необходимо использовать с префиксом -webkit-, хотя в спецификации этот префикс опущен.
