loading...

Авторизация ...

Имя пользователя :
Пароль :
я всё забыл!

JavaScript, CSSВыбор оформления блока на сайте с помощью jQuery и CSS (by ПафНутиЙ)

Выбор оформления блока на сайте с помощью jQuery и CSS (by ПафНутиЙ)


Как добавить разнообразия своему сайту? Вы уже не раз задаётесь этим вопросом?
Сегодня я расскажу как с помощью нехитрого jQuery скрипта и CSS можно осуществить возможность для посетителя сайта самому выбирать внешний вид блоков на сайте, естественно только тех, которые Вы ему разрешите менять smile

Идея реализации проста как 2 копейки:
При добавлении определённой конструкции внутрь любого дива на сайте будет появляться кнопочка. Нажимаем на неё и нашему взору представляется меню - список возможных вариантов оформления этого блока. Выбранный вариант записывается в куки браузера и при повторном заходе на страницу оформление блоков не меняется.

На самом же деле всё оказалось гораздо сложнее чем я думал, и потребовало довольно большого количества потраченного времени, нервов и, что немаловажно, заработанных "кровью и потом", денег. Но результат того стоит!
  Написал ПафНутиЙ 7 декабря 2010, оставили 10 комментариев просмотрели 3912 раз | рейтинг новости уменьшить   +4   Увеличить

В помощь вебмастеру, CSSCSS хаки для Firefox, Opera, Safari и IE

CSS хаки для Firefox, Opera, Safari и IE


В процессе верстки часто возникает проблема - требуется определить разные стили для разных браузеров. Почти всем известны хаки для IE, но думаю не многим известны пути решения этой проблемы для Firefox'a или же Safari.
Нашёл решение в интернете и решил поделится.
  Написал mizixxxx 25 марта 2009, оставили 17 комментариев просмотрели 7697 раз | рейтинг новости уменьшить   +4   Увеличить

В помощь вебмастеру, CSSЭффект прозрачности для изображений

Эффект прозрачности для изображений

Возможно Вы когда либо видели, что счетчики на сайте сделаны как бы более прозрачными или тусклыми а при наведении на них курсором приобретают начальные свойства. Мне всегда это нравилось, но я не задумывался а как это делается…
  Написал Akaxazam 31 декабря 2008, оставили 15 комментариев просмотрели 8182 раз | рейтинг новости уменьшить   +10   Увеличить

В помощь вебмастеру, JavaScript, CSSРаздвижная textarea

Раздвижная textarea


Всегда хотел себе такую вещь, вот недавно сделал и может кому ещё пригодится. С помощью этого javascrit можно раздвигать любое текстовое поле (textarea) одним перетаскиванием мыши. Причём выглядить очень даже не плохо...
  Написал REZER 24 августа 2008, оставили 16 комментариев просмотрели 8319 раз | рейтинг новости уменьшить   +8   Увеличить

JavaScript, CSS22 примеров меню на CSS

22 примеров меню на CSS


22 меню на CSS ,можно изменять как Вам угодно, в настройках включить CSS+JS ... и есче море настроек....

Внимание! У вас нет прав, для просмотра скрытого текста.
  Написал kavadims 9 августа 2008, оставили 19 комментариев просмотрели 13688 раз | рейтинг новости уменьшить   +13   Увеличить

В помощь вебмастеру, CSSДвойное зачеркивание.

Привет всем.

Не давно в одной из групп ВКОНТАКТЕ спросили, как сделать двойное зачеркивание - тега такого не существует - поэтому пришлось брать подручные средства. Я создал файл png с прозрачным фоном и двуми точками. И написал вот такую html страницу:
  Написал fl.atom 18 июня 2008, оставили 16 комментариев просмотрели 7904 раз | рейтинг новости уменьшить   +8   Увеличить

В помощь вебмастеру » CSSПрозрачный PNG и Internet Explorer

Вот решил поделится с миром одной полезной фичей, может для кого-то уже слышал о ней.

Иногда при создании дизайна для сайта встает вопрос о размещении на странице прозрачного PNG для придания сайту изысканности. Но проблема в том, что детище Мелкософта не распознает в формате PNG24 прозрачности, и просто заливает его белым фоном. Решить эту проблему очень просто.

Для этого нам потребуется:
- Скрипт pngbehavior.htc
- Прозрачная картинка blank.gif

Итак, приступим.

- Размещаем наш скрипт и gif, например, в папке images.

- Открываем pngbehavior.htc в блокноте, там в восьмой строке пишем путь к нашему GIF'у:

(var blankSrc = "../images/blank.gif")

- Cоздаем CSS-файл, в котором пишем класс png:

.png {behavior: url(../images/pngbehavior.htc);}

- Вставляем в html-документ PNG и приписываем ему только что созданный класс, обязательно указав ширину и высоту картинки, чтобы IE не сжал её в точку:

<img src="../images/image.png" alt="Прозрачный png" class="png" width="300" height="200">

- Открываем только что созданный html и прыгаем от радости, любуясь на прозрачные тени

Страничку с демо можно посмотреть на сайте автора:
_http://webfx.eae.net/dhtml/pngbehavior/demo.html
  Написал CSR 11 марта 2008, оставили 23 комментария просмотрели 10094 раз | рейтинг новости уменьшить   +62   Увеличить

В помощь вебмастеру » CSSCSS:hover для любого элемента в IE ниже 7-ки

Клепал тут меню для сайта на CSS. но т.к. в нем применяется псевдо-класс :hover, то нарисовалась маленькая проблема. дело в том, что в IE6 и ниже :hover поддерживается только для ссылок, т.е. для , но совершенно не работают с любыми другими элементами. а для меню необходимо, чтобы :hover работал с рисунками.
для себя я решил это нижеприведенным способом, может, кому пригодится также.
  Написал Fillosoff 9 марта 2008, оставили 16 комментариев просмотрели 17253 раз | рейтинг новости уменьшить   +13   Увеличить

В помощь вебмастеру, CSSОптимизация CSS-файлов

Каскадные таблицы стилей делают веб-сайты гораздо более удобными, т.к. они позволяют браузерам кэшировать стили, применимые к данному сайту, находящиеся в файле .css. Благодаря этому, сразу же отпадает необходимость в считывании стилей из раза в раз с загрузкой каждой новой страницы.
  Написал ippon 18 февраля 2008, оставили 22 комментария просмотрели 5771 раз | рейтинг новости уменьшить   +23   Увеличить

В помощь вебмастеру, CSSCмена курсора на сайте

Смена курсора на сайте
Выкладываю курсор для Lineage2. Вы не можете скачивать файлы с нашего сервера
Для его отображения необходимо в файл style.css в конец добавить следующий код:

Подробнее...
  Написал Skynell 9 февраля 2008, оставили 16 комментариев просмотрели 9486 раз | рейтинг новости уменьшить   +35   Увеличить

[removed][removed] [removed] (adsbygoogle = window.adsbygoogle || []).push({}); [removed]