Архив рубрики: Готовые решения

Симпатичные стили для формы (input,textarea)

#formazh input, textarea {
/*Borders and background color*/
border-radius: 6px;
-webkit-border-radius: 6px;
border: 1px solid #DADADA;
background: #F9F9F9;

/* Shadows*/
box-shadow: inset 2px 2px 3px rgba(0, 0, 0, .15);
-moz-box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: inset 2px 2px 3px rgba(0, 0, 0, .15);

/*Font styles*/
font-family: «Trebuchet MS», Arial, Helvetica, sans-serif;
color: #747474;
font-size: 12;
font-style: italic;

/*Spacings*/
margin-top: 5px;
height: 18px;
line-height: 18px;
padding: 5px;
width: 200px;
outline: none;
}

CSS3 Лента

Эффект ленты в моде. Большинство дизайнеров используют позиционированные изображения, но мы сделаем это с помощью свойств border и единственного тега <h2>.

<h2>My Heading</h2>

Давайте возьмём этот небольшой стиль и перекроем через него элемент с контентом.

/* элемент с контентом */
#page {
	width: 500px;
	padding: 50px;
	margin: 0 auto;
	background-color: #fff;
	border: 1px solid #333;
}
h2 {
	position: relative;
	width: 50%;
	font-size: 1.5em;
	font-weight: bold;
	padding: 6px 20px 6px 70px;
	margin: 30px 10px 10px -71px;
	color: #555;
	background-color: #999;
	text-shadow: 0px 1px 2px #bbb;
	-webkit-box-shadow: 0px 2px 4px #888;
	-moz-box-shadow: 0px 2px 4px #888;
	box-shadow: 0px 2px 4px #888;
}

В нашем примере у #page заданы поля по 50px и рамка толщиной в 1px. У заголовка имеется левый отступ значением -71px, так что он перекрывает край на 20px. Заметьте, мы также используемposition: relative чтобы при необходимости можно было позиционировать другие элементы ленты.

Теперь нам нужно создать сложенную часть ленты, которая проходит «за страницей». Как было видно в предыдущей статье, мы можем использовать свойство border для создания любого типа треугольника с помощью псевдоэлемента :after нулевой ширины и высоты.

h2:after {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 0px;
	top: 100%;
	border-width: 5px 10px;
	border-style: solid;
	border-color: #666 #666 transparent transparent;
}

Выглядит здорово и это может быть всё, что вам нужно. Но клиенты любят страницы насыщенные дизайном, так что немного доработаем ленту. Для начала мы можем добавить форму в виде флага к правому краю путём наложения белого треугольника через псевдоэлемент :before.

Замечательно, но как насчёт обратной складки у ленты по левому краю? Без проблем.

h2:before {
	content: ' ';
	position: absolute;
	width: 30px;
	height: 0;
	left: -30px;
	top: 12px;
	border-width: 20px 10px;
	border-style: solid;
	border-color: #999 #999 #999 transparent;
}

Цвет границы у псевдоэлемента должен совпадать с цветом фона h2, поскольку он на деле выводится над заголовком. Изменение z-index не работает c псевдоэлементами при позиционированном родителе.

Конвертация сайта битрикс в кодировку UTF-8 (cp1251 в UTF8)

Подготовка

  • Для работы сайта на битрикс в utf8 абсолютно необходимо наличие модуля mbstring в php (это есть почти на любом хостинге) и установка параметра
    mbstring.func_overload 2

    С этим может быть проблема т.к. с версии php 5.2.8 параметр меняется глобально на весь сервер (http://bugs.php.net/bug.php?id=47187). Уточните вопрос у хостера, но будьте осторожны если вам предложат CGI (см. «как выбрать хостера»).

    На VPS/выделенном сервере параметр без проблем меняется в php.ini.

  • Обязательно сделайте резервную копию работающего сайта, а лучше именно на копии проводите эксперименты. Если что-то пойдёт не так — вы можете потерять данные!

Этапы перехода

  • Подготовить сервер как показано выше
  • Добавить в /bitrix/php_interface/dbconn.php
    define(«BX_UTF», true);
  • Изменить в настройках сайта кодировку с windows-1251 на utf-8
  • Изменить в настройках языка ru кодировку с windows-1251 на utf-8
  • Конвертировать все файлы в utf8
  • Конвертировать БД в utf8
  • Сменить в /bitrix/php_interface/after_connect.php
    $DB->Query(«SET NAMES ‘cp1251′»smile;);

    на

    $DB->Query(«SET NAMES ‘utf8′»smile;);
  • Сбросить весь кеш
  • Выйти и зайти на сайт чтобы обновить данные сессии

Практическая сторона вопроса

После смены кодировки сайта публичная часть принимает вид:

Это нормально, браузер пытается показать данные не в той кодировке. Теперь после всех действий внешний вид восстановится, и мы увидим, что процесс прошёл успешно.

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

Примечание. Часто при использовании внешних программ для конвертации в файлы добавляется специальная последовательность символов, т.н. BOM. Эти символы должны находиться только вначале файла, а поскольку итоговая html страница является составной из нескольких php файлов, то спецсимволы появляются в теле html страницы. Если делаете вручную — не сохраняйте с BOM!

Для конвертации базы надо сменить кодировку базы, всех таблиц и всех текстовых полей таблиц. Вручную это тоже делать на очень удобно. Решил сделать конвертацию файлов и базы в одном скрипте.

Скрипт выполняет операции:

— Конвертировать все файлы в utf8
— Конвертировать БД в utf8

Остальное следует делать вручную по списку в том порядке, как написано.

Можно скачать по ссылке: convert_utf8.php

В итоге получил картинку

Теперь, словно, девушка даже слегка улыбнулась smile:)

Обновление от 20.02.2012

  • Теперь конвертируются все файлы, не только языки. При этом делается авто определение кодировки файла, а значит можно выполнять конвертацию повторно.
  • Для кодировки базы указывается сравнение utf8_unicode_ci (требуется продуктом).
  • Исправлены ошибки конвертации базы.
  • Шаг конвертации файлов можно пропустить.

Красивые шрифты для сайта by Google fonts

Красивые шрифты для сайта by Google fonts

Jura

Google Fonts

HTML
<link href=’http://fonts.googleapis.com/css?family=Jura&subset=cyrillic,latin’ rel=’stylesheet’ type=’text/css’></link>

CSS
h1 { font-family: ‘Jura’, arial, serif; }

Ruslan Display

Google Fonts

HTML
<link href=’http://fonts.googleapis.com/css?family=Ruslan+Display&subset=cyrillic,latin’                                                                    rel=’stylesheet’ type=’text/css’></link>

CSS
h1 { font-family: ‘Ruslan Display’, arial, serif; }

Play

Google Fonts

HTML
<link href=’http://fonts.googleapis.com/css?family=Play&subset=cyrillic,latin’ rel=’stylesheet’ type=’text/css’>
</link>

CSS
h1 { font-family: ‘Play’, arial, serif; }

Didact Gothic

Google Fonts

HTML
<link href=’http://fonts.googleapis.com/css?family=Didact+Gothic&subset=cyrillic,latin’ rel=’stylesheet’ type=’text/css’></link>

CSS
h1 { font-family: ‘Didact Gothic’, arial, serif; }

Open Sans Condensed

Google Fonts

HTML
<link href=’http://fonts.googleapis.com/css?family=Open+Sans+Condensed:light&subset=cyrillic,latin’ rel=’stylesheet’ type=’text/css’></link>

CSS
h1 { font-family: ‘Open Sans Condensed’, arial, serif; }

Lobster

Google Fonts

HTML
<link href=’http://fonts.googleapis.com/css?family=Lobster&subset=cyrillic,latin’ rel=’stylesheet’ type=’text/css’></link>

CSS
h1 { font-family: ‘Lobster’, arial, serif; }

 

Красивые шрифты для сайта. Коллекция лучших шрифтов для дизайна

Сегодня выкладываю большую коллекцию лучших шрифтов для дизайна. Да не просто шрифтов, а кириллических (то есть с русскими буквами).Более 50 вариантов. Такие посты надо добавлять в закладки!

 

Dited

Bender

Furore

Metro

Days

Philosopher

Molot

London

20 DB

Neucha

Cuprum

Zopa

Airport

Fontin Sans Cyrillic

Hattori Hanzo

Bicubik

Hardpixel

PixelPlay

Flow

Zhizn

Cony

Ubuntu Font Family

Movavi Grotesque Black

Liberation Serif

DAN

Хартия

DejaVu fonts

Pacifica

Dimitrina

Danger

St Transmission

Gentium

Brava

Metro

GrandNover

Каори

Сумкин шрифт

Тот самый шрифт

Барделин

Perforama

Codename Coder Free 4F

Five Minutes

Boldin

Pt Sans

Play

Open Sans

PT Serif

AleksandraC

GardensC

Web Serveroff

30 слайдеров на jQuery для сайта

Подборка слайдеров контента, от простых реализаций до самых мощных, например таких которые используются на сайтах apple.com или flickr.com.

1. SlideJS

slide JS

Скачать Пример
Кстати о SlideJS уже упоминали в отдельной заметке, вместо со всеми его многочиленными настройками и опциями.


2. Flickr-powered Slideshow

Flickr-powered Slideshow

Скачать Пример


3. Apple-style Slideshow

Apple-style Slideshow

Скачать Пример


4. jFlow Plus

jFlow Plus

Скачать Пример


5. MobilySlider

MobilySlider

Скачать Пример


6. Apple Style slider (Mac slider)

Apple Style slider

Скачать Пример


7. Просто слайдер (не знаю как называется :-)Beautiful jQuery slider

Beautiful jQuery slider

Скачать Пример
Здесь надо заметить, что реализация не очень качественная и слайдер иногда подтормаживает.


8. Start/Stop Slider

Start/Stop Slider

Скачать Пример


9. Auto-Playing Featured Content Slider

Futured Content Slider

Скачать Пример
Слайдер с превьюшками


10. Nivo Slider

Nivo Slider

Скачать Пример
Мощный слайдер с большим количеством настроек


11. Anything Slider

Anything Slider

Скачать Пример


12. Easy slider

easy slider

Скачать Пример


13. Coda Slider

coda slider

Скачать Пример


14. Moving Boxes

Apple-style Slideshow

Скачать Пример
В примере ссылка на гитхаб


15. Slider Twirlie

Slider Twirlie

Скачать Пример
Простой и лёгкий слайдер.


16. Coin Slider

Coin Slider

Скачать Пример
Красивые эффекты смены изображений.


17. iTunes-esque slider

iTunes-esque slider

Скачать Пример
Слайдер в стиле iTunes.


18. Slick jQuery Slidehow

Slick jQuery Slidehow

Скачать Пример


19. Mosaic Slideshow With jQuery & CSS

Mosaic Slideshow With jQuery & CSS

Скачать Пример


20. Automatic Image Slider

Automatic Image Slider

Скачать Пример
Простой слайдер с удобной html-разметкой, сверху есть похожая реализация, но этот меньше нагружает браузер.


21. ImageSwitch

ImageSwitch

Скачать Пример
Интересная реализация имеет 9 эффектов смены изображений, но работает только с изображениями.


22. Presentation Cycle

Presentation Cycle

Скачать Пример
Слайдер с удобным индикатором времени смены слайдов.


23. Parallax Slider

Parallax Slider

Скачать Пример
Слайдер с интересно оформленным пэйджингом в виде перевернутых превьюшек. И параллельно слайдеру на заднем плане прокручивается фон.


24. Smooth Div Scroll

Smooth Div Scroll

Скачать Пример
Плавно скролит.


25. jQuery Blinds

jQuery Blinds

Скачать Пример


26. slideViewerPro 1.5

slideViewerPro 1.5

Скачать Пример


27. Rhinofader

Rhinofader

Скачать Пример


28. Dragdealer JS

Dragdealer JS

Скачать Пример
Отличный слайдер на jQuery, реализованы: drag, нестандартный скроллер, нестандартный контрол в виде ползунка с передающейся пользовательской функцией, красивая анимация.


29. Tiny Carousel

Tiny Carousel

Скачать Пример
Слайдер — Tiny Carousel, очень легкий всмысле нагрузки на браузер, есть вертикальная и горизонтальная прокрутки, можно легко сделать простые табы используя этот же слайдер.


30. bxSlider

bxSlider

Скачать Пример
У слайдера много настроек.


31. Coda Slider 2.0

Coda Slider 2.0

Скачать Пример
Вторая версия известного Coda Slider.


32. ImageFlow

ImageFlow

Скачать Пример
Красивый слайдер чем-то похожий на iTunes-листалку.


33. Simple Slide

Simple Slide

Скачать Пример
Простой слайдер. На сайте так и написано: простой, компактный, гибкий и аккуратный.