Сегодня 6 апреля, воскресенье

Какой рейтинг вас больше интересует?

получить код

Главная /

Каталог блогов

/

Cтраница блогера Хаки и Скрипты Next Generation CMS

Записи в блоге

	Хаки и Скрипты Next Generation CMS Голосов: 1 Адрес блога: http://ngcmshak.ru Добавлен: 2013-12-31 14:21:51 блограйдером 88888888

Тег link /

2013-10-14 17:19:30 (читать в оригинале)

Тег

Код:

 <link />

определяет ссылку на внешний источник (файл):

Код:

 <html>
<head>
<link rel="stylesheet" href="../style.css" type="text/css" />
</head>
<body>
</body>
</html>

Размещается в секции

Код:

 <head> </head>

.

Атрибуты и значения

rel="stylesheet" – указывает тип связи между документом и отдаленным источником.
href="../style.css" – указывает url источника.
type="text/css" – указывает тип внешнего источника (файла).
Обыкновенно тег

Код:

 <link />

содержит ссылку на отдаленный .css файл .

Тэги: html, html5,
Постоянная ссылка

Теги li

2013-10-14 17:17:16 (читать в оригинале)

Теги

Код:

 <li> </li>

определяют элемент (пункт) списка:

Код:

 <html>
<body>
<ul>
<li>Sony</li>
<li>Toshiba</li>
<li>Asus</li>
</ul>
</body>
</html>

Теги

Код:

 <li> </li>

являются элементами тегов <

Код:

 ol> </ol>, <ul> </ul>, <menu> </menu>,

определяющих упорядоченные и неупорядоченные списки.

Тэги: html, html5,
Постоянная ссылка

CSS и JQuery эффекты в табах (вкладках)

2013-10-14 13:22:54 (читать в оригинале)

CSS3 стал приобретать все большую популярность и больше браузеров начинают поддерживать его,многие примочки сделанные на JavaScript можно заменить CSS3. Сегодня я покажу вам, как создать анимированный текст в вкладке с использованием только CSS3.
1.Скачать исходники [isnt-logged]Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам pure-css-tab.zip (28.13 Kb)[/is-logged]
2.Подключаем код в тело сайта, это сами вкладки

Код:
<ul class="tabs">
<li>
<input type="radio" checked name="tabs" id="tab1">
<label for="tab1">tab 1</label>
<div id="tab-content1" class="tab-content animated fadeIn">
...
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab2">
<label for="tab2">tab 2</label>
<div id="tab-content2" class="tab-content animated fadeIn">
...
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab3">
<label for="tab3">tab 3</label>
<div id="tab-content3" class="tab-content animated fadeIn">
...
</div>
</li>
</ul>
3.В стили добавляем :
Код:
body, html {
height: 100%;
margin: 0;
-webkit-font-smoothing: antialiased;
font-weight: 100;
background: #aadfeb;
text-align: center;
font-family: helvetica;
}

.tabs input[type=radio] {
position: absolute;
top: -9999px;
left: -9999px;
}
.tabs {
width: 650px;
float: none;
list-style: none;
position: relative;
padding: 0;
margin: 75px auto;
}
.tabs li{
float: left;
}
.tabs label {
display: block;
padding: 10px 20px;
border-radius: 2px 2px 0 0;
color: #08C;
font-size: 24px;
font-weight: normal;
font-family: 'Lily Script One', helveti;
background: rgba(255,255,255,0.2);
cursor: pointer;
position: relative;
top: 3px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.tabs label:hover {
background: rgba(255,255,255,0.5);
top: 0;
}

[id^=tab]:checked + label {
background: #08C;
color: white;
top: 0;
}

[id^=tab]:checked ~ [id^=tab-content] {
display: block;
}
.tab-content{
z-index: 2;
display: none;
text-align: left;
width: 100%;
font-size: 20px;
line-height: 140%;
padding-top: 10px;
background: #08C;
padding: 15px;
color: white;
position: absolute;
top: 53px;
left: 0;
box-sizing: border-box;
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
}

Тэги: css,, интерфейс
Постоянная ссылка

Замена лоадера GIF на анимацию CSS
2013-10-13 13:49:13 (читать в оригинале)

Сегодня покажу как сделать заменить " loading" картинку на CSS . Идея состоит в том, чтобы управлять объектами HTML, используя только CSS , таким образом, мы можем избавится от GIF.

Отказ от ответственности: Цель этой статьи состоит в том, чтобы показать Вам возможности CSS. Содержание может не быть практичным, чтобы использовать в действительности. Демонстрационный пример работает лучше всего в Хроме, и частично работает в Firefox и Сафари.

ПРЕИМУЩЕСТВА ИСПОЛЬЗОВАНИЯ ANIMATION CSS перед GIF/JS
Это дало мне больше контроля над анимацией. Я нашел, что намного более удобнее отредактировать элементы и скорость анимации через CSS вместо того, чтобы по мучатся с Фотошопом.
Анимация CSS использует ускорение GPU, которое намного быстрее, чем применение JS и намного легче с точки зрения размера, когда сравниваются с gif изображениями.
CSS позволяет пользователям быть в состоянии взаимодействовать с анимацией. Для gif изображений нет никакого взаимодействия между пользователями и анимацией.
С ДРУГОЙ СТОРОНЫ, ТАКЖЕ ЕСТЬ НЕКОТОРЫЕ НЕДОСТАТКИ
Анимация CSS еще широко не поддерживается. Например, в нашем демонстрационном примере, некоторые аннимации не работают в Сафари, но работают хорошо в Хроме.
Чтобы улучшить работу, я решил свести код HTML к минимуму, чтобы ускорить начальную загрузку страницы. Реализовал при помощи псевдо элементов :before и :after. CSS позволяет мне легко создавать 3 анимированных элемента, используя один HTML-тэг. Вы можете легко отредактировать любые изменения, просто регулируя числа в файле CSS.
В демо 5 различных АЯКСА CSS, анимации, чтобы показать Вам,на что способна анимация CSS . Не стесняйтесь экспериментировать на них так, как Вы хотите.
Я надеюсь, что Вы понравились мой небольшой эксперимент и если у Вас есть идеи, чтобы показать нам, не стесняйтесь показывать их в комментариях ниже.

1.Скачиваем архив [isnt-logged]Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам pure-css-ajax-loader.zip (14.79 Kb)[/is-logged] ,распаковываем и заливаем в папку с шаблоном.
2.в хеад подключаем стили и .
Код:
<link rel="stylesheet" type="text/css" href="css/style.css" />
3.В main.tpl заменяем
Код:
<div id="loading-layer"><img src="{{ tpl_url }}/images/loading.gif" alt="" /></div>
на
Код:
<div id="loading-layer"><div class="loader1">
<i></i><i></i>
</div></div>
где "loader1" изменить на свой выбор 2,3,4,5. Конечно можно сделать и грамотнее,просто прописав стили лоадера в стиле "loading-layer"

Тэги: css, анимация,, слайдшоу
Постоянная ссылка

Фон сайта с эффектом параллакса на jQuery плагине jquery.plaxmove
2013-10-07 00:21:33 (читать в оригинале)

В последнее время стали появляться сайты с удивительным эффектом параллакса, который создает иллюзию трехмерности изображений.
Сегодня установим фон с эффектом паралакса
1.Скачиваем архив [isnt-logged]Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам background-site-effect-parallax-jquery.zip (720.74 Kb)[/is-logged],распаковываем в папку с шаблоном.
2.В хеад подключаем скрипты,если у вас не подключен jquery,то подключайте и его тоже :
Код:
<--script src="{tpl_url}/js/jquery.js" type="text/javascript"></script-->
<script src="{tpl_url}/js/jquery.plaxmove.js" type="text/javascript" ></script>
3.В стили добавляем :
Код:
.layer1{background:url(layer1.png);width:100%;height:100%;top:0px;left:0px}
.layer2{background:url(layer2.png);width:100%;height:100%;top:0px;left:0px}
.layer3{background:url(layer3.png);width:100%;height:100%;top:0px;left:0px}
4.Добавляем сам фон в тело сайта:
Код:

<div class="layer1" style="top: 13px; left: 48.225px; "></div>
<div class="layer2" style="top: 25.05px; left: 94.45px; "></div>
<div class="layer3" style="top: 36.074999999999996px; left: 138.6px; "></div>
5.И последнее инициализация :
Код:
<script type="text/javascript">
$(function(){
$('.layer1').plaxmove({ratioH:0.05,ratioV:0.05})
$('.layer2').plaxmove({ratioH:0.1,ratioV:0.1})
$('.layer3').plaxmove({ratioH:0.15,ratioV:0.15})
});
</script>
6.Настройки
ratioH — модификатор движения мыши по горизонтали
ratioV — модификатор движения мыши по вертикали
reversed — меняет местами X и Y (движение мыши по горизонтали меняют позицию объекта по вертикали и наоборот )
invertH — инвертирование движения мыши по горизонтали
invertV — инвертирование движения мыши по вертикали
Настройки задаются при инициализации скрипта и могут сочетаться в любой комбинации.
Для изменения используйте настройки и стили,ну и свои изображения.

Тэги: css,, изображениями,, эффекты
Постоянная ссылка

Страницы: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

Блограйдеров
14509

Блогов
219947
(+0 сегодня)

Сообществ
1311
(+0 сегодня)

ЖЖ все стерпит
по сумме баллов (758) в категории «Истории»

Категория «Книги»

Взлеты Топ 5


+141	163	Информационный колодец
+139	146	Annelle
+131	156	Zoxx.ru - Блог Металлиста
+128	151	МухО_о
+101	114	erner_kissinger

Падения Топ 5


-1	108	«Linux» - это просто!: Создаем архив...
-3	9	Вещий сон!
-5	45	Блог / Новости ― Книжный интернет-магазин Лантика
-28	135	К Мечте - быстро!
-31	136	Бесплатно скачать фильмы, музыку, программы, книги, журналы

Загрузка...

BlogRider.ru не имеет отношения к публикуемым в записях блогов материалам. Все записи
взяты из открытых общедоступных источников и являются собственностью их авторов.