Адаптивный facebook плагин «Страница»
Документация СложностьHTML 30%CSS 20%JavaScript 70%Вступление На официальной странице плагина сказано: «Он не будет реагировать на изменения блочной модели после загрузки страницы.» Действительно, плагин не адаптивный, но сегодня мы научим его реагировать на изменения блочной модели после загрузки страницы 🙂 И все это мы сделаем на нативном JavaScript. HTML часть <div class="widget-facebook"> <iframe id="facebook_iframe" class="facebook_iframe"></iframe> </div> Уберем все лишнее, скрипты будем писать в [...]Кнопка «Вниз» на чистом JavaScript
Stackoverflow СложностьHTML 20%CSS 80%JavaScript 60%Вступление Делаем на нативном JavaScript анимированную кнопку, при клике на которую, происходит скролл на один «экран» вниз. HTML часть <div class="wrapper"> <button type="button" class="scroll_down" id="scroll_down"></button> </div> Создадим обертку, внутри которой и будет наша кнопка. Class будем использовать в CSS, а id в JavaScript. CSS часть .wrapper { background: -webkit-linear-gradient(right, #c56f82, #497ccb); [...]Кнопка «Наверх» на чистом JavaScript
Stackoverflow СложностьHTML 20%CSS 60%JavaScript 70%Описание Создаем кнопку на нативном JavaScript, без jQuery. Создаем улучшенную кнопку, действующую как вверх, так и вниз. HTML часть Вначале разметка. Добавляем в HTML тег a, задаем ему класс и заглавие(title). Содержимое тега будет спецсимвол ↑ он как раз и будет отображаться в виде стрелки. Важно заметить, что здесь у тега a нет атрибута href, [...]Background-image в размер окна браузера
Центрирование background-image в размер окна браузера, с текстом поверх него. Использую CSS свойство «vh». Быстрое решение. HTML CSS
Комментарии