Основы вёрстки HTML5
Сегодня я покажу основные моменты, которые стоит знать при работе с HTML5, и мы с вами сверстаем базовый HTML5-шаблон.
Photoshop-линейка в Firefox/ Chrome/ Safari
Не так давно я писал о Photoshop-направляющих для Firefox. Ещё один нужный каждому верстальщику инструмент из арсенала Photoshop — линейка. Как ни странно, для Mozilla есть и линейка) Для этого мы будем использовать плагин MeasureIt
Читать далее…
Colorzilla: cоздаём CSS градиенты прямо в браузере
Продолжая тему полезных для каждого дизайнера страниц , сегодня я покажу CSS-генератор Сolorzilla . Этот генератор позволяет прямо в браузере создавать градиент, и заодно получать его кроссбраузерный CSS код .
Photoshop-направляющие в Mozilla
Работая в Photoshop, мы привыкли пользоваться направляющими для выравнивания объектов. Думаю, многим будет приятно узнать, что такие направляющие есть и в Mozilla. Для этого вам нужен аддон foxGuide. Без сомнения, они очень полезны при вёрстке, особенно, если страница длинная..
Как придать картинке внешний вид фотографии
Эффект, собственно, заключается в придании трехмерности для картинки (за счёт фона), представляя её фотографией, лежащей на столе. Последнее время этот популярный и красивый эффект встречается в веб-дизайне всё чаще. Вёрстка заключается в нескольких обёртках блока.
Как добавить на сайт виджет комментариев вконтакте
- Ui, Вёрстка, Полезное
- |
- 5 Коммент.
Пока лазил по интернету, заметил на паре блогов необычный виджет комментариев — комментировать можно было прям от имени аккаунта вконтакте. Я подумал, что ведь это не плохая идея — особенно с нынешним режимом микроблога, когда каждый твой комментарий видит вся лента друзей) К тому же пользователю отныне не надо вводить почту и ник для того,чтобы оставить комментарий! Очень удобно!
Итак, как же поставить комментарии vkontakte на свой блог?
Читать далее…
Быстрый пост: как отобразить код на HTML-странице
Иногда может потребоваться вывести на HTML- странице код в чистом виде . Но вот незадача — если с ним ничего не сделать — он просто будет обработан браузером.
Как вариант, можно заменить все < и > на спец. символы :
< на <
> на >.
Но мне этот способ не нравится, т.к. потом может возникнуть потребность трансформировать эти скобки обратно.
Есть ещё один способ — просто помещаете код внутри тега
<xmp></xmp>
На обычных — ничем-не-обрабатываемых страницах работает точно!
31 CSS селектор — это будет полезно знать!
Вы умеете выбирать нужны элементы через id, class, по типу элемента.. Но мало кто знает, что возможности CSS-селекторов гораздо шире, чем принято считать.
Я покажу расширенные возможности селекторов CSS, включая CSS3, которые работают только в самых новых браузерах.
Указатели на чистом CSS. Техника «CSS-треугольники»
Недавно нашёл весьма интересную технику. Техника позволяет делать треугольники — указатели на чистом CSS. Думаю, всем понятен её явный плюс в лёгкости. Называется она по-английский Triangle, ну а я назову её просто — «CSS-треугольники» .
Демо
Как это работает?
Когда мы задаём бордеры, они имеют углы. Мы воспользуемся этим свойством. Задаём толщину границы 20px и три стороны задаём прозрачными, а одну — с видимым бордером:
Добавляем нестандартные шрифты, используя Google Font API
Если вдруг вы захотели добавить на свою страницу не универсальный шрифт для интернета , а какой-нибудь необычный, то воспользуйтесь css-свойством @font-face.
Однако, не все браузеры одинаково показывают шрифты, прикреплённые таким образом. Более того, они различаются даже в стандартах шрифтов, которые они поддерживают.
Чтобы избежать всяких проблем, воспользуйтесь Google Font API.
Страница 1 из 4 1 2 3 4 Следующая »