GTAlex о работе в сети и не только

Рубрика: Вёрстка

  • 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ти! Получается каждый файл –…