Какой рейтинг вас больше интересует?
|
Главная / Главные темы / Тэг «ccc»
Урок 37 — Шаг 7: Верстаем основную разметку сайта 2014-01-19 15:28:07
How To... В видео показана уже готовая общая разметка и показаны ключевые моменты по ее созданию. В ...
+ развернуть текст сохранённая копия
How To... В видео показана уже готовая общая разметка и показаны ключевые моменты по ее созданию. В этой статье не будет описания видео, а будет описание того, как сделать общую […]
Related posts:
Урок 31 — Шаг1: Проект будущего сайта Шаг1: Проект будущего сайта С этого урока мы начнем вместе...
Урок 9 — Необходимый софт Необходимый софт Здравствуйте! Добро пожаловать в девятый по счету урок...
Урок 32 — Шаг 2: Рисуем общий шаблон В этом уроке я расскажу с чего...
[[ This is a content summary only. Visit my website for full links, other content, and more! ]]
Тэги: css, endels, html, photoshop, php, веб-сервер, видео, динамический, основная, разметка, сайт, статический
Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №92 (12 — 18 января 2014) 2014-01-19 00:32:14
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT- ...
+ развернуть текст сохранённая копия
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости
Читать дальше →
Тэги: 2013, 2014, animation, ces, cocaine, css, css3, group, gulp, html, html5, jquery, labs, nest, zfort, блог, браузеры, веб-дизайн, веб-разработка, дайджест, интересное, компании, новости, ресурсы, сми, ссылки
[Перевод] Трюки с CSS-анимациями: мгновенные изменения, отрицательные задержки, анимация transform-origin и другое 2014-01-18 14:28:49
Применяя CSS-анимации в повседневной работе, я постепенно выработал привычку экспериментировать ...
+ развернуть текст сохранённая копия
Применяя CSS-анимации в повседневной работе, я постепенно выработал привычку экспериментировать с ними в свободное время. Постоянно пытаясь реализовать очередную интересную задумку с использованием как можно меньшего числа элементов HTML, я обнаружил немало способов сделать с помощью CSS довольно неочевидные вещи. В этой статье я хочу поделиться некоторыми из них.
Быстрое изменение состояния посреди анимации
Обычно анимации используются для того, чтобы плавно менять свойства элементов со временем. Однако изменения могут также быть практически мгновенными. Для этого надо задать два ключевых кадра с очень маленьким интервалом, например в 0.001%:
@keyframes toggleOpacity {
50% { opacity: 1; } /* Turn off */
50.001% { opacity: 0.4; }
/* Keep off state for a short period */
52.999% { opacity: 0.4; } /* Turn back on */
53% { opacity: 1; }
}
Вот как я использовал этот приём для имитации мигающей неоновой вывески с помощью прозрачности и свойства text-shadow:
Читать дальше →
Тэги: css, css-анимации, css-трансформации, z-index, блог, веб-разработка, компании, нордавинд, псевдоэлементы
Как мы ставили опыты на студентах 2014-01-17 13:36:26
В статье про формат обучения в HTML Academy говорилось, что, скорее всего, ...
+ развернуть текст сохранённая копия
В статье про формат обучения в HTML Academy говорилось, что, скорее всего, он даёт более высокое качество обучения, чем другие форматы. В этой статье я расскажу о первых попытках проверки этого предположения.
Я работаю ассистентом в НИУ ИТМО, и осенью 2013 судьба преподнесла настоящий подарок: дисциплину «Информатика» и пять групп студентов-первокурсников. Что в этом такого хорошего? Во-первых, часть лабораторных работ (которые я и вёл) были посвящены HTML и CSS. Во-вторых, первокурсники — это ещё исполнительные, сознательные и ответственные студенты. Но самое главное, что мне достались электронщики, лазерщики и оптики и среди них было очень много абсолютных новичков в вёрстке.
Такой шанс упускать было нельзя. И на конец семестра был запланирован эксперимент (или скорее небольшой опыт), который давно хотелось провести. Суть опыта такова:
Читать дальше →
Тэги: academy, css, html, htmlacademy, блог, веб-разработка, компании, процесс, учебный, эксперимент
Делаем красивый чек бокс или радио кнопки 2014-01-15 15:24:46
Сегодня показываю пример изменения кнопок чек бокса и радио кнопки. 1.Первый вариант это ...
+ развернуть текст сохранённая копия
Сегодня показываю пример изменения кнопок чек бокса и радио кнопки. 1.Первый вариант это чекбокс ,вот сам HTML код нашей формы с чек боксом Код: <div class="switch">
<input type="checkbox" checked="" id="switch-1" class="switch-check">
<label for="switch-1" class="switch-label">
Опция
<span class="switch-slider switch-slider-on"></span>
<span class="switch-slider switch-slider-off"></span>
</label>
</div> 2.Вот стили для него Код: /* Switch */
.switch,
.switch-label,
.switch-slider {
width:154px;
height:54px;
}
.switch {
position:relative;
display:inline-block;
margin:0 50px 50px 0;
}
.switch-check {
position:absolute;
opacity:0;
}
.switch-label,
.switch-slider {
position:absolute;
top:0;
}
.switch-label {
left:0;
text-indent:-9999px;
}
.switch-slider {
border-radius:27px;
box-shadow:
0 0 0 2px rgba(0, 0, 0, 0.1) inset,
0 0 4px rgba(0, 0, 0, 0.5) inset,
0 5px 4px 1px rgba(0, 0, 0, 0.3) inset,
0 27px 0 rgba(0, 0, 0, 0.07) inset;
-webkit-transition:width 0.2s linear;
-moz-transition:width 0.2s linear;
-o-transition:width 0.2s linear;
transition:width 0.2s linear;
}
.switch-slider-on {
left:0;
width:54px;
background:#369AEE url(../images/on.svg) 100% 12px no-repeat;
}
.switch-slider-off {
right:0;
background:#FFF url(../images/off.svg) 86px 14px no-repeat;
}
.switch-slider-off:after {
position:absolute;
top:1px;
left:1px;
width:52px;
height:52px;
border-radius:50%;
background:#E5E5E5;
background:-webkit-linear-gradient(#D0D0D0, #FDFDFD);
background:-moz-linear-gradient(#D0D0D0, #FDFDFD);
background:-o-linear-gradient(#D0D0D0, #FDFDFD);
background:linear-gradient(#D0D0D0, #FDFDFD);
box-shadow:
0 0 2px 2px #FFF inset,
0 0 4px 1px rgba(0, 0, 0, 0.6);
content:'';
}
.switch-label:active .switch-slider-off:after,
.switch-check:focus + .switch-label .switch-slider-off:after {
background:#D5D5D5;
background:-webkit-linear-gradient(#C8C8C8, #E4E4E4);
background:-moz-linear-gradient(#C8C8C8, #E4E4E4);
background:-o-linear-gradient(#C8C8C8, #E4E4E4);
background:linear-gradient(#C8C8C8, #E4E4E4);
}
.switch-check:checked + .switch-label .switch-slider-on {
width:154px;
}
.switch-check:checked + .switch-label .switch-slider-off {
width:54px;
} Ну с этим все вот исходник [isnt-logged] Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам knopka.zip (1.79 Kb)[/is-logged]
Вариант два с радио кнопкой
1. Сам HTML нашей кнопки
Код: <fieldset class="switch">
<input type="radio" checked="" name="switch-1" id="switch-radio-off-1" class="switch-radio switch-radio-off">
<label for="switch-radio-off-1" class="switch-label switch-label-off">
Выкл.
<span class="switch-slider"></span>
</label>
<input type="radio" name="switch-1" id="switch-radio-on-1" class="switch-radio switch-radio-on">
<label for="switch-radio-on-1" class="switch-label switch-label-on">
Вкл.
<span class="switch-slider"></span>
</label>
</fieldset> 2.И стили
Код: /* Switch */
.switch,
.switch-label,
.switch-slider {
width:154px;
height:54px;
}
.switch {
position:relative;
display:inline-block;
margin:0 50px 50px 0;
padding:0;
border:none;
}
.switch-radio {
position:absolute;
visibility:hidden;
}
.switch-label,
.switch-slider {
position:absolute;
top:0;
}
.switch-label {
left:0;
text-indent:-9999px;
}
.switch-slider {
z-index:2;
width:154px;
border-radius:27px;
box-shadow:
0 0 0 2px rgba(0, 0, 0, 0.1) inset,
0 0 4px rgba(0, 0, 0, 0.5) inset,
0 5px 4px 1px rgba(0, 0, 0, 0.3) inset,
0 27px 0 rgba(0, 0, 0, 0.07) inset;
-webkit-transition:width 0.2s linear;
-moz-transition:width 0.2s linear;
-o-transition:width 0.2s linear;
transition:width 0.2s linear;
}
.switch-slider:after {
position:absolute;
top:1px;
width:52px;
height:52px;
border-radius:50%;
background:#E5E5E5;
background:-webkit-linear-gradient(#D0D0D0, #FDFDFD);
background:-moz-linear-gradient(#D0D0D0, #FDFDFD);
background:-o-linear-gradient(#D0D0D0, #FDFDFD);
background:linear-gradient(#D0D0D0, #FDFDFD);
box-shadow:
0 0 2px 2px #FFF inset,
0 0 4px 1px rgba(0, 0, 0, 0.6);
content:'';
}
.switch-label-on .switch-slider {
left:0;
background:#369AEE url(../images/on.svg) 100% 12px no-repeat;
}
.switch-label-on .switch-slider:after {
right:1px;
}
.switch-label-off .switch-slider {
right:0;
background:#FFF url(../images/off.svg) 86px 14px no-repeat;
}
.switch-label-off .switch-slider:after {
left:1px;
}
.switch-label:active .switch-slider:after {
background:#D5D5D5;
background:-webkit-linear-gradient(#C8C8C8, #E4E4E4);
background:-moz-linear-gradient(#C8C8C8, #E4E4E4);
background:-o-linear-gradient(#C8C8C8, #E4E4E4);
background:linear-gradient(#C8C8C8, #E4E4E4);
}
.switch-radio:checked + .switch-label .switch-slider {
z-index:1;
width:54px;
}
.switch-radio:checked + .switch-label .switch-slider:after {
visibility:hidden;
} Вот исходник [isnt-logged]Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам knopka_2.zip (1.89 Kb)[/is-logged]
Все выглядит красиво и работает,пользуемся.
Тэги: css,, иконки, кнопки
Главная / Главные темы / Тэг «ccc»
|
Взлеты Топ 5
Падения Топ 5
|
