HTML/CSS — TechCave

HTML/CSS

Стена группы

Загрузка...
7 дней назад
#

Flexbox: насколько велика эта гибкая коробка?



Продолжаю публикацию переводов по особенностям CSS-технологии Flexbox.



Из цикла опубликованы следующие статьи:



  1. Что происходит при создании контейнера Flexbox.

  2. Все, что вам нужно знать о выравнивании во Flexbox.



Краткое резюме



В последних двух статьях мы рассмотрели, что происходит при создании flex-контейнера, а также рассмотрели выравнивание. На этот раз мы рассмотрим часто запутанную проблему размеров во Flexbox. Как Flexbox решает, насколько большие должны быть элементы?



Это третья часть моей серии о Flexbox. В последних двух статьях мы рассмотрели, что происходит при создании flex-контейнера, и исследовали выравнивание, как оно работает во Flexbox. На этот раз мы собираемся взглянуть на размеры. Как мы контролируем размер наших flex элементов, и какой выбор делает браузер, когда он регулирует размер?



Источник
Загрузка...
7 дней назад
#

Пятничные вебинары от Skillbox: фриланс и программирование





Завтра выходные, а значит, еще есть немного времени для обучения перед отдыхом. Сегодняшняя подборка посвящена веб-программированию и мобильной разработке. Кроме того, есть несколько вебинаров о фрилансе.

Источник
Загрузка...
12 дней назад
#

Все, что вам нужно знать о выравнивании во Flexbox



Цикл публикаций по особенностям CSS-технологии Flexbox от Rachel Andrew.



  1. Что происходит при создании контейнера Flexbox.




Резюме

В этой статье мы рассмотрим свойства выравнивания во Flexbox, а также основные правила, помогающие запомнить, как работает выравнивание как на главной, так и на поперечной оси.



В первой статье этой серии я объяснила, что происходит при объявлении display: flex для элемента. На этот раз мы рассмотрим свойства выравнивания и их работу с Flexbox. Если вы когда-либо были в замешательстве относительно того, когда выполнять align, а когда justify, я надеюсь, что эта статья снимет все вопросы!



История Flexbox выравнивания

За всю историю CSS компоновки возможность правильного выравнивания элементов по обеим осям казалась мне действительно самой сложной проблемой веб-дизайна. Т.е. способность правильно выравнивать элементы и группы элементов была для многих из нас самой захватывающей особенностью Flexbox, когда он впервые появился в браузерах. Выравнивание стало просто двумя строками в CSS:



Источник
Загрузка...
Den
12 дней назад
#

Что происходит при создании контейнера Flexbox?



Это перевод статьи Rachel Andrew, являющейся одним из разработчиков спецификаций CSS.



В короткой серии статей я собираюсь потратить некоторое время на детальную распаковку Flexbox — точно так же, как я делала в прошлом с grid. Мы рассмотрим, для чего был разработан Flexbox, что он действительно делает хорошо, а когда мы не можем выбрать его в качестве способа компоновки.



В этой статье мы подробно рассмотрим, что на самом деле происходит при добавлении display: flex в вашу таблицу стилей.



Источник
Загрузка...
8 месяцев назад
#

Соглашения по именованию CSS-сущностей и экономия времени



Я слышал, как многие разработчики говорят, что ненавидят CSS. Опыт подсказывает мне, что причина здесь в том, что они не уделяют достаточно времени для того, чтобы изучить CSS. Да, речь идёт о не самом дружелюбном «языке», но он успешно используется для стилизации веб-страниц уже более 20-ти лет. Это впечатляет, и с технологиями такого уровня распространённости приходится считаться. Однако, по мере роста объема стилей, задействованных в некоем проекте, проявляется один большой минус CSS: его очень сложно поддерживать. А плохо написанные стили быстро превращаются в кошмар.

В этом материале мы поговорим о соглашениях по именованию CSS-сущностей. Применяя их, вы, во-первых, сможете работать спокойнее и увереннее, а во-вторых — сэкономите много часов, которые раньше шли на доводку и отладку стилей.



Вы уже бывали в подобной ситуации, правда?

Источник
Загрузка...
8 месяцев назад
#

Thinking in HTML



В предыдущей статье я рассказал немного о вёрстке газеты с помощью прямой генерации постскрипт-файлов из отдельных готовых макетов. Комментаторы обратили моё внимание на LaTeX. Для меня было очевидно, что в описанном мной случае LaTeX был избыточным, но осадок остался. И я пошёл искать подробности в Яндексе.



LaTeX поразил меня прежде всего размером пакета texlive-full. Затем — сложностью вставки кавычек-ёлочек: надо каждый раз переключаться на латиницу. Я попробовал начать писать эту статью в LaTeX, и понял, что это не нужно. Потому что а) у Хабра другие требования (например, кавычки Хабр делает сам), и б) у меня тоже другие требования: если статья не для Хабра, я всё равно буду ставить обычные кавычки, а потом заменю их на ёлочки макросом в Виме.



Думаю, так рассуждаю не я один — что удобнее во время написания текста ставить какие-то простые метки, обозначающие кавычки, ссылки, жирность, нумерованный список… А потом заменять эти метки на универсальную разметку типа HTML с помощью, допустим, Markdown.pl.



Источник
Загрузка...
9 месяцев назад
#

Несколько советов начинающим веб-разработчикам



image

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

Итак, под катом статья о самых частых ошибках и вопросах возникающих при изучении веб-разработки.

Источник
Загрузка...
Den
9 месяцев назад
#

Недокументированные приемы CSS



Всем привет! Зовут меня Дмитрий Григоров. Работаю фронтедером в Райффайзенбанке в команде RBO PRO. Я расскажу и покажу вам, как можно творчески применять данные возможности CSS. В статье мы рассмотрим следующие темы:

  • Фоны и рамки;

  • Фигуры;

  • Визуальные эффекты.





Источник
Загрузка...
9 месяцев назад
#

Путь верстальщика: с нуля до сеньора



Здравствуйте, меня зовут Александр Зеленин, и я веб-разработчик.
Многократно я слышал мнение, что верстка — удел начинающих frontend’еров. Хотя фактически это важнейшая часть любого (почти) веб-проекта. Это то, что пользователи видят в первую очередь. На текущий момент качественная вёрстка (особенно проектирование блоков) в крупном проекте требует большого количества различных навыков.



В данной статье представляю схему развития верстальщика



image
[большая по клику]
Само собой, это не всеобъемлющая и единственно верная схема. Есть ещё целая гора связанных навыков, релевантных технологий и так далее. Градация является субъективной.



Источник
Загрузка...
Den
9 месяцев назад
#

Коротко об HTML 5.2



Уважаемые коллеги, добрый день.

В связи с тем, что 14.12.2017 года W3C в блоге
объявила о выходе новой редакции HTML 5, предлагаю Вашему вниманию краткое описания основных нововведений.

Новации

  1. Поддержка модульного JavaScript
    На мой взгляд, самая интересная и ожидаемая новация связана с поддержкой модульного синтаксиса последнего стандарта ECMA Script.



Источник
Загрузка...
10 месяцев назад
#

Делаем адаптивный HTML, добавляя одну строку в CSS



image

В этой статье я расскажу вам, как использовать CSS Grid для создания супер классной сетки изображений, которая варьирует количество столбцов в зависимости от ширины экрана.

И самое классное: адаптивность будет добавлена с помощью одной строки CSS.

Это означает, что нам не нужно загромождать HTML лишними классами (
Col-sm-4,
col-md-8) или создавать медиа-запросы для каждого размера экрана.

Рассмотрим все подробнее.

Источник
Загрузка...
10 месяцев назад
#

Как быстро спроектировать сайт с помощью CSS Grid



image

Модуль CSS Grid — это фантастический инструмент для создания макетов веб-сайтов. Он позволяет вам экспериментировать с макетами быстрее, чем любой другой инструмент, которые я пробовал.

В этой статье я научу вас, как это сделать.

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

Если вы совершенно не знакомы с CSS Grid, вам может понадобиться просмотреть мою предыдущую статью
Учим CSS Grid за 5 минут.

Источник
Загрузка...
10 месяцев назад
#

Учим CSS Grid за 5 минут



Быстро познакомимся с будущим макетов веб-сайтов.

image

Grid макеты имеют основополагающее значение для дизайна веб-сайтов, а модуль CSS Grid — это самый мощный и простой инструмент для его создания.

В этом году модуль также получил нативную поддержку
основных браузеров (Safari, Chrome, Firefox), поэтому я считаю, что всем фронтенд разработчикам придется изучать эту технологию в недалеком будущем.

В этой статье я быстренько расскажу вам об основах CSS Grid.

Источник
Загрузка...
10 месяцев назад
#

Адаптивная вёрстка





В чём разница между резиновой, адаптивной и отзывчивой вёрсткой? Как правильно их применять?

Давайте разберёмся в отличиях подходов и попробуем сформулировать один общий вместо трёх.



Источник
Загрузка...
11 месяцев назад
#

Нормальный сброс





Расскажите про ресеты и нормалайзы, что лучше использовать?

Знаете, это как отвёртка и молоток — что лучше? Все хороши.



Источник
Загрузка...
2 3

Авторизация

Пользователи

Георгiй Москвитинъ
Andpyxa Tutunnik
Andrey_fox
Jane linch
genagy
Pasha Radiuk
KotikBSD
Эрик Имашев
Амир Исмагилов