css верстка, html. js (javascript) и jQuery : 2012

понедельник, 24 сентября 2012 г.

Как убрать h1 надпись с главной страницы в Joomla 2.5

Не знаю как кто, но я долго парился, пока нашел, как убрать в Джумле 2.5 этот не совсем порою нужный h1 заголовок. Скрывать не хотелось и искал. Тема для тех - кто в поиске. Истина где-то рядом)

суббота, 15 сентября 2012 г.

Рейтинг-виджет от Graddit для блогов (Blogger, blogspot, uCoz)

Задумывался, как украсить свой сайт красивыми рейтингами, но не знал, как сделать? Graddit.com пролил свет на это! Разработчик Gene сделал отличный виджет рейтингов, которые идеально подходят для блогов, а гибкие настройки и огромный функционал делают этот виджет просто сказочным, его можно легко установить на любую страницу блога. GENE спасибо тебе!
Итак, для выбора существует 7 визуальных видов.

Чтоб выбрать любой интересный для Вас рейтинг - зайдите на graddit.com

Чтоб установить рейтинг в Blogger (blogspot) нужно:

1. Выбрать нужный виджет на graddit.com/rus и скопировать код

2. Изменить HTML шаблона своего блога, вставив после строки <data:post.body/> скопированный код. Если строчек <data:post.body/> несколько - тогда "методом втыка".

3. После тега <head> вставить стрку для подключения стилей css:
<link type="text/css" rel="stylesheet" href="http://static.graddit.com/css/graddit.css" />
4. Сохранить и радоваться)))

Пример работы можно увидеть на http://blackieblack.blogspot.com/

понедельник, 3 сентября 2012 г.

Как вставить музыку на сайт (блог) из "вконтакте"

Многие задавались уже мыслью, как вставить свою любимую музычку из VK (ВК или ВКонтакте) себе на сайт, но че-то не получалось, теперь все просто)) весьма))

Нам понадобиться:

1 Плеер. Мне нравится от Гугля

<embed type="application/x-shockwave-flash" flashvars="audioUrl=MP3_FILE_URL" src="http://www.google.com/reader/ui/3523697345-audio-player.swf" width="300" height="27" quality="best"></embed>

2. Сам адрес (URL) трека.

Чтоб получить адрес трека правой кнопкой нажать на любой из этих приколов и и выбрать - копировать адрес ссылки.

3. Вставить вместо MP3_FILE_URL скопированный адрес
4. Вставить себе в блог, сайт (куда нужно, туда и вставляй!)

Thatz all folks. Всем мир.

воскресенье, 26 августа 2012 г.

Создать с помощью css объемную кнопку с эффектом нажатия без фотошопа и javascripta

Новое время и новые веяния в дизайне диктуют свои правила. Этот долбаный web 2.0))) Зато стало явно красивей.

Итак, цель: Нужно забабахать объемную динамическую кнопку не использую photoshop да и еще без джаваскрипта, типа для ленивых))

КСС позволили заменить в некоторых случаях JS, а CSS3 шагнул еще дальше. Они позволяют заменить фотошоп! (Урааа! Свершилось!!!). И сейчас каскадные таблицы стилей пригодятся для проектирования объемной динамической кнопки-ссылки (3 состояния: при наведении, покоя, и нажатии).

Универсальна методика для создания динамических кнопок позволяет получит следующее:

Такие кнопки могут тянуться до бесконечности. Все зависит от длины текста.
Углы могут быть как угодно закруглены, или нет
Вся площадь кликабельна.
При отключенных изображениях видна
Не нужно!!! рисовать в PS или муторошно искать готовый рисунок кнопки))

Как я писал выше, кнопка будет менять вид в 3х случаях:

когда наведен курсор
когда произведено нажатие
ну и по дефолту

Конструкция

<a href="#" class="bttn"><span>Динамическая кнопка</span></a>

Кнопни мну

.bttn{

display: block;
padding: 10px;
text-decoration: none;

font-size: 30px;
font-weight: bold;
color: #FE63BB;
float: left; /* кнопка растягивается только на длину текста */
position: relative;/* изменяя в дальнейшем top, добиться эффекта нажатия*/
/* закругляем углы */
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
/* делаем градиент (эффект выпуклости)*/

background:-moz-linear-gradient(top,rgba(238,238,238,1)50%,rgba(195,195,195,1)100%);
background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(50%,rgba(238,238,238,1)),color-stop(100%,rgba(195,195,195,1)));
background:-webkit-linear-gradient(top,rgba(238,238,238,1)50%,rgba(195,195,195,1)100%);
background:-o-linear-gradient(top,rgba(238,238,238,1)50%,rgba(195,195,195,1)100%);
background:-ms-linear-gradient(top,rgba(238,238,238,1)50%,rgba(195,195,195,1)100%);
background:linear-gradient(top,rgba(238,238,238,1)50%,rgba(195,195,195,1)100%);

/* тень, которую отбрасывает кнопка)*/
-moz-box-shadow:1rgba(0, 0, 0, .30) 2px 2px 2px;
-webkit-box-shadow:rgba(0, 0, 0, .30) 2px 2px 2px;
box-shadow:rgba(0, 0, 0, .30) 2px 2px 2px;

text-shadow: white 0px 1px 0;
border: 1px solid rgba(180,180,180,1);
}

.bttn:visited
{
color: #FE63BB;
}

.bttn:hover
{
/* тень, которую отбрасывает кнопка сделать больше*/
box-shadow:rgba(0, 0, 0, .30) 4px 4px 4px;
-moz-box-shadow:1rgba(0, 0, 0, .30) 4px 4px 4px;
-webkit-box-shadow:rgba(0, 0, 0, .30) 4px 4px 4px;
/* поменять градиент (эффект большей выпуклости)*/

background:-moz-linear-gradient(top,rgba(245,245,245,1)50%,rgba(185,185,185,1)100%);
background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(50%,rgba(245,245,245,1)),color-stop(100%,rgba(185,185,185,1)));
background:-webkit-linear-gradient(top,rgba(245,245,245,1)50%,rgba(190,190,190,1)100%);
background:-o-linear-gradient(top,rgba(245,245,245,1)50%,rgba(185,185,185,1)100%);
background:-ms-linear-gradient(top,rgba(245,245,245,1)50%,rgba(185,185,185,1)100%);
background:linear-gradient(top,rgba(245,245,245,1)50%,rgba(185,185,185,1)100%);

top: -1px;/*поднять кнопку*/
text-decoration: none;
color: #FE63BB;
}

.bttn:active,.bttn:focus{
/* тень, которую отбрасывает кнопка можно вообще убрать*/
box-shadow:rgba(0, 0, 0, .30) 1px 1px 1px;
-moz-box-shadow:1rgba(0, 0, 0, .30) 1px 1px 1px;
-webkit-box-shadow:rgba(0, 0, 0, .30) 1px 1px 1px;
top: 1px;/*втопить кнопку*/
/* поменять градиент для визуального 3Д*/

background:-moz-linear-gradient(top,rgba(230,230,230,1)50%,rgba(200,200,200,1)100%);
background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(50%,rgba(230,230,230,1)),
color-stop(100%,rgba(200,200,200,1)));
background:-webkit-linear-gradient(top,rgba(230,230,230,1)50%,rgba(200,200,200,1)100%);
background:-o-linear-gradient(top,rgba(230,230,230,1)50%,rgba(200,200,200,1)100%);
background:-ms-linear-gradient(top,rgba(230,230,230,1)50%,rgba(200,200,200,1)100%);
background:linear-gradient(top,rgba(230,230,230,1)50%,rgba(200,200,200,1)100%);
}

Также не забыть исправить баг Оперы.
При нажатии кнопки, она не возвращается обратно, для этого микро код JS придет на помощь и код кнопки будет:

<a href="#" class="bttn" onclick="this.blur();"><span>Кнопни мну</span></a>

В файрфоксе, опере, хроме работает на ура, ИЕ только в 10м(долбанный тормоз)

Удачного коддинга, бро!

понедельник, 24 сентября 2012 г.