Как быстро копировать css стили

[Denalexeev]

Привет всем)

Ребят, вопрос немного странный, но может кто поможет.

Если на сайте мне понравился какой-то блок, то, чтобы его себе забрать мне надо скопировать его html код через инструменты разработчика, потом пройтись по каждому элементу и скопировать его css код. Обычно это так долго, что быстрее написать самому подсмотрев только решение в css.

Может есть какой плагин или расширение для хрома, которое бы копировало html код сразу вместе с css или как то иначе выходило из этой ситуации? Кто чем работает?

P.s. пример, для тех кто не понял - понравились мне, например, хлебные крошлки на nulled.cc - я копирую их html код, а потом по одному копирую css стили. Хочу делать это за минуту, а не за 10.

upd: что-то я случайно тему в wordpress ветке создал - господа модеры, перенесите куда надо, плиз

 

[sol_los]

совсем народ обленился(( пиши сам, это куда быстрее

 

[inturned]

Руками копируем и это дает нам практику и опыт. Ленивые ....

 

[Denalexeev]

Пффф... обленился... ну да, ну да. Есть спрос - есть заказы, ищу методы оптимизации, чтобы делать быстрее, больше и лучше вот и все. Я же не себе сайтик на коленке собираю пол года, а работаю на поток.

Практика и опыт есть. Даже верстая проекты с нуля без заготовок или фреймворков не обойтись - готовый ли это bootstrap какой-нибудь или просто твоя шпаргалка тегов и стилей, иначе будешь на каждую страницу по дню тратить.

Если заказчик говорит - хочу сайт такой и такой, как у этих и у тех, то нужно вырезать по быстрому, изменить под тз и сдавать заказ, а не сидеть учиться. Всему свое время.

 

[gradar]

Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся

 

[inturned]

Пффф... обленился... ну да, ну да. Есть спрос - есть заказы, ищу методы оптимизации, чтобы делать быстрее, больше и лучше вот и все. Я же не себе сайтик на коленке собираю пол года, а работаю на поток.

Практика и опыт есть. Даже верстая проекты с нуля без заготовок или фреймворков не обойтись - готовый ли это bootstrap какой-нибудь или просто твоя шпаргалка тегов и стилей, иначе будешь на каждую страницу по дню тратить.

Если заказчик говорит - хочу сайт такой и такой, как у этих и у тех, то нужно вырезать по быстрому, изменить под тз и сдавать заказ, а не сидеть учиться. Всему свое время.

Если ты часто работаешь с версткой, то вырезать какой-то блок на другом сайте вообще не составит труда, если ты конечно, не всеми сайтами переносишь, тогда рипать пачками проще

 

[Denalexeev]

Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся

Спасибо, то что надо!

Попробовал все расширения - напишу небольшое ревью.

CSSSteal
Судя по скриншотам - это именно то, чего я и ожидал. Поставив расширение надо выделить нужный класс, выбрать вкладку расширения в инспекторе и нажать "Получить css". Первый раз слил код не того элемента - немного не получалось, взял div выше - все ок! Но работает почему то не на всех сайтах и не так быстро, как хотелось бы.

CSS Dig
Немного не то, что я искал. Расширение сканирует страницу и позволяет посмотреть стили, классы и свойства под разными углами. Полезная штука для анализа... наверное.

eXtract Snippet
Единственное расширение у которого есть свой видео туториал. Впрочем, там все и так довольно просто. Но... немного долго. Может просто мне не повезло, может донор не особо подходящий. Если не считать того, что я очень долго ждал получения css кода, то главный минус расширения в том, что он выдает код одной строкой + добавляет довольно много ненужного мусора. Собственно вычищать мусор из минимизированного кода как-то... да вообще не круто

SnappySnippet
Лучшее расширение из подборки. Работает по тому же принципу, что и прошлое (можете посмотреть видео туториал прошлого), но быстрее и лучше, разбивает код аккуратно по классам (смотрел на одном доноре с прошлым), позволяет скопировать результат в 1 клик (вроде классика, но нужная), клевый дизайн и какие то даже есть настройки. Кроме того, полученный код можно просмотреть сразу в популярных "код сервисах". Собственно, скину оттуда и пример - Для просмотра ссылки Войди или Зарегистрируйся - за минуту забрал заголовок с сайта о wp. Правды ради надо сказать, что он подтянул еще 3 svg'шки, которые выводились неэкранированными символами, я их снес, но все равно считаю, что это практически полная автоматизация процесса.

upd: собственно, я забыл же главное! Это расширение сносит стандартные названия классов и компилирует свои. Потратить минуту на переменование и можно добавлять в свою библиотеку элементов с удобным и понятным для себя названием.

Собственно, это был только маленький тестик, впереди большие тест драйвы))

 

[javx]

cssUsed попробуй еще.

 

[Sorcus]

Жопы ленивые