-
placeholder.com — генерация шаблонных превью изображений нужного размера
Однозначно в закладки! Очень удобный сервис генерации шаблонных изображений нужного размера, так же можно порулить самим текстом, его цветом и фоном. Раньше часто пользовался, тут понадобилось — совсем вылетело из головы… пришлось заново искать. Поэтому решил запостить сюда. формат можно задать любой .GIF, .JPG, .JPEG, .PNG <a href=»https://placeholder.com»><img src=»https://via.placeholder.com/300×150/FFFF00/000000.png?Text=WebsiteBuilders.com»></a>
-
Лайфхаки при работе с адаптацией сайта
Конечно, самый главный инструмент в работе над адаптацией сайта это Webmaster Tools встроенная в браузер, вызываемая по кнопке F12 Но и с ним не всегда можно быстро определить какой блок мешает адаптивному сужению шаблона сайта. В таких случаях можно использовать такой css, задающий всем блокам красный бордюр — и сделать это можно прямо в панели…
-
Вставляем видео с ютуба на сайт адаптивно
На авторство не претендую, просто оставлю себе готовое решение, чтоб не искать потом по просторам сети Код фрейма оборачиваем блоком с классом video, размеры фрейма можно не указывать .video { position: relative; padding-bottom: 56.25%; /* задаёт высоту контейнера для 16:9 (если 4:3 — поставьте 75%) */ height: 0; overflow: hidden; } .video iframe { position:…
-
Как быстро и просто вставить SVG иконки на сайт?
Продолжаю ковыряться в методиках современной вёрстки, сегодня нашел отличный ролик на тему работы с SVG иконками. Собственно ролик https://www.youtube.com/watch?v=R2YC3SrTYHk Если в 2х словах о технологии — необходимые иконки загружаются в онлайн сервис https://icomoon.io/ (жмякаем в правом верхнем углу по ссылке IcoMoonApp) (кстати там тоже есть хорошая библиотека, например я именно там и взял бесплатные иконки)…
-
Технологии современной вёрстки pug + gulp + sass + sublime text + emmet
Последнее время совершенно нет времени даже на пост в блоге — помимо текущей работы погрузился в технологии современной вёрстки. Собственно, случайно наткнулся на видео FrontCoder-a Современная верстка сайта с нуля и понеслось … Информации для переваривания ОЧЕНЬ много, и вся на вес золота! Одно дело изучать сухую теорию, другое дело видеть своими глазами непосредственно процессинг,…
-
Полезные возможности современного CSS
Работаю с макетом, реализованным с возможностями современной CSS вёрстки. Довольно много интересного, красивого и в то же время простого кода. Реализацией хлебных крошек не могу не поделиться! Классно! Это CSS Это HTML А это результат!
-
Микро-разметка на веб странице в помощь поисковому боту
Всем привет! Продолжаю публиковать то, с чем работал недавно и решил поделиться … Сегодня, хочу затронуть тему использования микроразметки на страницах веб сайта. Не хочу как то особо превышать её значение, но как говориться — «кашу маслом не испортить». Поэтому считаю, что лишним для поисковых систем эта информация 100% не будет — и как вывод…
-
Почему … не работает в IE ? рейтинг форумов вебмастеров
Собственно, дожил и я до решения кроссбраузерных проблем 🙂 В этой теме я полный нуб — ни в теории, ни в практике с подобными вещами не сталкивался, только по наслышке. И вот — заказчик ставить ТЗ — слайдер работает везде, кроме IE! нужно чтоб заработал и в осле! Ну коли я сам не профи, первое…
-
CSS эффект — увеличение с поворотом
Просто и красиво 🙂 img.gt:hover { transform: scale(1.15) rotate(5deg); } img.gt { box-shadow: 0 0 1px rgba(0, 0, 0, 0); display: inline-block; transform: translateZ(0px); transition-duration: 0.3s; transition-property: transform; }
-
Требования к HTML верстке
Вчера обратились ко мне за советом в поиске верстальщика — какие именно требования предъявлять верстальщику?! Собственно, велосипед изобретать не стал — поискал, нашел и решил частично сохранить найденное себе. Итак, требования и рекомендации к html вёрстке: 1. Кроссбраузерность Сайт должен нормально работать в IE7+, FF3+, Opera9+, Safari4+, Chrome последней мажорной версии (или в зависимости от…
-
Готовые CSS стили для таблиц
Очень популярная задача — оформить таблицу в стиль подходящий для сайта. Выбрать, более менее подходящее для допила можно тут Ещё найду — дополню, если кто знает ещё подобные ссылочки — постим в комменты, буду благодарен.
-
Bootstrap Sublime Text Emmet FontWeb и другие полезняшки для вёрстки
Решил сделать репост полезных ссылок с http://webdesign-master.ru для себя, дабы не потерялось 🙂 Шрифты для веб-дизайна и верстки: fontweb.ru Создание прототипов «на коленке» wireframe.cc Иконки в шрифтах fontawesome.io Адаптивная каруселька owlcarousel Sublime Text 3 Sublime Text 3 Package Control LiveReload Browser Extension Sublime Text 3 Live Reload Plugin Fork by GrafikArt сервис проверки адаптивности (виртуальные…
-
Просто находка webdesign-master.ru
Получив ТЗ на вёрстку PSD макета в кроссбраузерный адаптивный шаблон, и осознав свою отсталость в этом вопросе (верстал довольно давно, вручную, причём сугубо «дедовскими» методами в FAR-e с подсветкой синтаксиса — вот такой я «динозавр») решил почитать о современных подходах в данном вопросе… Собственно, томить не буду — Видео BOOTSTRAP: Как создаются современные адаптивные сайты…
-
vipmaster.net — перспективный SEO форум
Итак, прошу любить и жаловать VIPMaster — Форум ВебМастера и SEO оптимизатора. Молодой, перспективный SEO форум. Приятный интерфейс со всеми удобными «фенечками» на движке IP.Board Помимо прямого направления поисковой оптимизации, довольно плотно обсуждаются темы сайтостроения (Web-программирования,Услуги вебмастера), конвертации траяфика (электронная коммерция), коммерция(купля/продажа) и другие не менее интересные темы. Не буду скрывать, что статья рекламная —…
-
JQuery — мультиселект и cлайдер бегунок
Задача — создать фильтр с красивым выпадающим списком с возможностью множественного выбора, а так же слайдер-бегунок для выбора числовых диапазонов. Собственно, плотный поиск в сети конечно предоставит необходимые сведения, но может кому пригодиться найденный мною материал: 1. jQuery Dropdown CheckList — TESTING — собственно, готовое решение множественного выбора с различными демонстрационными примерами (мне например сильно…
-
Тонкости вёрстки — картинки интерфейса в одном файле
Коллега, просматривая сайт www.kupikupon.ru заметил особенность вёрстки — абсолютно все элементы шаблона были расположены в одном файле и стилями уже отображали участок, соответствующий нужному элементу (они ещё статику всю на CDN утащили — но это уже другая тема для разговора). Посчитайте сколько управляющих элементов в файлике — на вскидку более 50ти! Получается каждый файл —…