Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты
Войти
Забыли пароль?
или продолжите с
Создать аккаунт
Я хочу получать рассылки с лучшими постами за неделю
или
Восстановление пароля
Восстановление пароля
Получить код в Telegram
Войти с Яндекс ID Войти через VK ID
Создавая аккаунт, я соглашаюсь с правилами Пикабу и даю согласие на обработку персональных данных.
ПромокодыРаботаКурсыРекламаИгрыПополнение Steam
Пикабу Игры +1000 бесплатных онлайн игр
«Дурак подкидной и переводной» — классика карточных игр! Яркий геймплей, простые правила. Развивайте стратегию, бросайте вызов соперникам и станьте королем карт! Играйте прямо сейчас!

Дурак подкидной и переводной

Карточные, Настольные, Логическая

Играть

Топ прошлой недели

  • Oskanov Oskanov 8 постов
  • alekseyJHL alekseyJHL 6 постов
  • XpyMy XpyMy 1 пост
Посмотреть весь топ

Лучшие посты недели

Рассылка Пикабу: отправляем самые рейтинговые материалы за 7 дней 🔥

Нажимая кнопку «Подписаться на рассылку», я соглашаюсь с Правилами Пикабу и даю согласие на обработку персональных данных.

Спасибо, что подписались!
Пожалуйста, проверьте почту 😊

Новости Пикабу Помощь Кодекс Пикабу Реклама О компании
Команда Пикабу Награды Контакты О проекте Зал славы
Промокоды Скидки Работа Курсы Блоги
Купоны Biggeek Купоны AliExpress Купоны М.Видео Купоны YandexTravel Купоны Lamoda
Мобильное приложение

Верстальщик

С этим тегом используют

Верстка HTML Программирование Программист IT Дизайнер Все
80 постов сначала свежее
13
shaitan.vladimir
shaitan.vladimir
3 года назад
Web-технологии

Циклы в SASS / SCSS ( @each )⁠⁠

Привет, в этом уроке мы разберемся что такое циклы в SASS / SCSS на примерах разберем как перебирать структуры данных List и Map и на примерах разберемся как использовать все эти вещи вместе с интерполяцией для динамической генерации стилей. Приятного просмотра.

P.S. Больше уроков у меня на канале

[моё] HTML Html 5 Основы HTML CSS Css3 Javascript Frontend Верстка Верстальщик Программирование Программист Разработка Разработчики IT Баг Собеседование Видео YouTube
2
11
shaitan.vladimir
shaitan.vladimir
3 года назад
Web-технологии

Урок - Подключение CSS⁠⁠

HTML существует только для разметки контента, но не несет в себе никакой стилизации элементов. За это отвечает язык CSS. Все визуальные отличия тегов друг от друга мы видим только благодаря тому что браузер имеет свою таблицу стилей которая работает по умолчанию. Как вы уже поняли, для того чтобы мы могли стилизовать элементы сами, нам нужно будет использовать язык CSS. Разберемся как его внедрить на нашу страницу.


Способ #1 - inline styles


Одним из общих атрибутов для каждого тега, является атрибут style, внутри которого мы и можем писать наш CSS код.


<h1 style="color: red">Some Title - <a href="#">link</a></h1>

Способ #2 - тег <style>


Внутри тега <style> мы можем писать стили, идентифицируя нужные нам теги по их атрибутам, именам и тд. (селектору тега). Тег <style> должен быть расположен внутри тега <head>.


<head>
<style>
div {
max-width: 1200px;
margin: 0 auto;
background-color: antiquewhite;
padding: 10px 20px;
}
</style>
</head>

Открыть на CodePen


Способ #3 - отдельный файл


Самое лучшее что можно придумать, это подключение отдельного CSS файла к нашему проекту. Делается это через тег <link>, который также должен быть вложен внутрь тега <head>.


Атрибуты:

rel - должен иметь значение stylesheet

href - ссылку или путь к файлу .css


Тег <link> имеет больше атрибутов, на данном этапе их рассматривать не будем.


<link rel="stylesheet" href=".././css/style.css">


Способ #4 - отдельный файл через тег <style>


Не рекомендую вам так делать, лучше старайтесь всегда когда возможно подключать свои .css файлы через тег link. Такой способ практически ничем не отличатся от подключения через <link> кроме синтаксиса, но он читается намного хуже и усложняет понимание.


<style>
@IMPORT '.././css/style2.css';
</style>

P.S. Больше уроков у меня на канале

P.P.S. Файлы с урока

Показать полностью
[моё] HTML Html 5 Основы HTML CSS Css3 Javascript Frontend Верстка Верстальщик Программирование Программист Разработка Разработчики IT Баг Собеседование Видео YouTube Длиннопост
28
4
shaitan.vladimir
shaitan.vladimir
3 года назад
Web-технологии

Видеоурок - Семантические теги HTML⁠⁠

Привет, в рамках сегодняшнего урока вы узнаете что такое семантика и зачем она нужна для WEB страниц, какие семантические теги бывают и как они работают. На примере рассмотрим каким образом правильно создавать семантическую разметку .

[моё] Баг Программирование Программист IT Разработка HTML Html 5 Основы HTML CSS Css3 Javascript Верстка Верстальщик Создание сайта Видео YouTube
2
12
shaitan.vladimir
shaitan.vladimir
3 года назад
Web-технологии

Теги для создания форм. Часть №2. <input>⁠⁠

Теги для создания форм. Часть №2. <input> Программист, Программирование, Баг, Разработка, IT, HTML, Html 5, Основы HTML, CSS, Css3, Javascript, IT юмор, Собеседование, Интернет, Верстка, Верстальщик, Web, Web-программирование, Веб-разработка, Разработчики, Длиннопост

<input> - тег который мы вкладываем внутрь тега <form>, с помощью него мы будем создавать интерактивные поля для ввода информации пользователем.


Тег <input> можно использовать и вне тега <form>.



Также имеет много атрибутов позволяющих настроить его внешний вид, поведение и работу.


<input type="text">
<input type="number">
<input type="email">
<input type="tel">
<input type="checkbox">
<input type="radio">
<input type="button" value="Submit">
<input type="submit" value="Submit">
<input type="color">
<input type="date">
<input type="time">
<input type="file">
<input type="hidden">
<input type="password">
<input type="range">
<input type="url">


Это основные типы тега <input>, в зависимости от типа тега он может принимать какие-то атрибуты или не принимать их, об этом лучше читать в документации.

Рассмотрим несколько атрибутов на примере стандартного input для ввода текста.

<input type="text" value="Some text here">

value - позволяет нам определить или предопределить значение тега input.

<input type="text" placeholder="First name">

placeholder - определяет текст, который будет показа пользователь внутри input до того момента пока пользователь не начнет вводить свое значение. Доступен не всем типам input.

<input type="text" required>

required - определяет, будет ли обязательным этот input в рамках текущего тега <form>.

<input type="text" disabled>

disabled - определяет, будет ли у пользователя возможность редактировать содержимое input

<input type="text" pattern="">

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

<input type="text" name="first_name">

name - задает имя для нашего input

<form id="form_id"></form>
<input type="text" form="form_id">
Атрибут form - позволяет связать input с тегом <form>, input лежит вне тега <form>.

Атрибутов <input> существует огромное количество, мы рассмотрели только самые распространенные.



Label - <label>


Это тег позволяющий указывать подпись для элемента, обычно используется вместе с тегом input. input и label можно связать с помощью id для input и for для label.


<form action="">
<h2>Contact form #1</h2>
<div>
<label for="first_name">First name:</label>
<input id="first_name" type="text" placeholder="First name">
</div>
</form>

Также мы можем положить внутрь <label> тег <input> в таком случае они свяжутся автоматически и нам не нужно указывать атрибуты for и id.


<form action="">
<h2>Contact form #2</h2>
<div>
<label>
<span>First name</span>
<input type="text" placeholder="First name">
</label>
</div>
</form>

Пример


<form action="">
<h2>Contact form #3</h2>
<div>
<label for="user_name">First name:</label>
<input id="user_name" type="text" placeholder="User name">
</div>
<div>
<label>
<span>User surname:</span>
<input type="text" placeholder="User surname">
</label>
</div>
<div>
<input type="submit" value="Submit">
<input type="reset" value="Reset from">
</div>
</form>

P.S. Больше уроков у меня на канале.


P.P.S Для тех кто хочет посмотреть код - ссылка на git репозиторий

Показать полностью
[моё] Программист Программирование Баг Разработка IT HTML Html 5 Основы HTML CSS Css3 Javascript IT юмор Собеседование Интернет Верстка Верстальщик Web Web-программирование Веб-разработка Разработчики Длиннопост
30
Napuzdelu
Napuzdelu
3 года назад
IT-юмор

Жэ-Эс, Мэ-Эс, Аш-Тимеля, всё краусиво буит, атуичаю!⁠⁠

Жэ-Эс, Мэ-Эс, Аш-Тимеля, всё краусиво буит, атуичаю!
[моё] IT юмор Верстальщик Программирование
13
cheplyk
cheplyk
4 года назад

Как-то так...⁠⁠

Как-то так...
Верстальщик Упущенный шанс Скриншот Мат
1
1
davek57
4 года назад

Ликбез для страждущих⁠⁠

Длинно-текст.

Что такое дизайнер, что такое верстальщик, что такое кодер (или программер) и что такое печатник и вообще: нужны ли они Вам?

Дизайнер обязан обладать художественным чутьем и безмерной фантазией, которую зачастую именуют креативом, знать передовые методы и средства разработки дизайна. Есть подвиды дизайнеров: web дизайнеры (они делают сайты, на которые потом люди смотрят и говорят: «вот это - хорошая контора, на красоту потратились, ой, как все переливается!!!»), дизайнеры по полиграфии (причем еще и ID, то бишь, фирменного стиля (по которому вас начинают узнавать «в лицо»), листовок, буклетов и тому подобной бумажной, ну, которую можно пощупать, ерунды); дизайнеры POS или сувенирки (это такие штуки: воблеры, блистеры, шелфтокеры и всякие там постеры, которые большие дяди с дипломатами и девочки в мини подсовывают потенциальным клиентам или просто хорошим людям, ставят на вставках и в магазинах – правда, куда их потом девать – не говорят); дизайнеры-архитекторы, интерьеров, ландшафтов и т.д. Короче говоря, если вы говорите дизайнеру: «Сделай нам красиво» – он будет долго ругаться, но Вас поймет и спросит «Когда срок сдачи, в каком цвете и в каком формате желаете?»


Верстальщик обязан обладать хорошим глазомером, чтобы строчку из 1000 символов уместить в бокс размером 12х12 pixels и, чтобы таблица с ваши прайсом после этой манипуляции не повисла садами Семирамиды; усидчивостью чтобы добиться этого и устойчивой психикой, чтобы делать это каждый день по 8 часов кряду. Переводить из gif-a в tif и обратно, резать так, чтобы лицо было рядом с туловищем, а не с пяткой (хотя это тоже прикольно), поставить кнопочки в горизонтальную навигашку, а не по вертикали, т.е. как просил заказчик и что ему будет, если шрифт будет в кривых. Знать к чему приводит href и как сделать так, чтобы он был зеленым. Знать, что Times – это не только газета лондонских яппи. Короче говоря, если вы говорите верстальщику: «Сделай нам все на 1895 страницах и не больше» – он будет долго ругаться, но Вас поймет и спросит «Когда срок сдачи, сколько будет таблиц с пентаграммами и будем ли делать оглавление?»


Кодеру нужно понимать смысл словосочетаний чистый код и движок на PHP, прикручивая к странице БД, он точно знает какое поле он выдумал для пущей убедительности и чтобы вы ничего не поняли, во фреймах и лайерах у него полный беспорядок но каждый друг к другу прикреплен основательно, а в итоге вы щелкаете мышкой и ощущаете всю мощь математического гения того субъекта, который все это сотворил. Когда же вы говорите ему, что Java не нужно, а CSS видно только у дам с декольте, он мило улыбается садиться и делает все не так как вы сказали, а так, как положено и модно и чтобы сайт весил мало, чтобы трафик менеджер у вашего провайдера не насчитал вам будущую дырку в кармане. Короче говоря, если вы говорите кодеру: «Сделай нам форум на тему отрывания спичечных головок» – он будет долго ругаться, но Вас поймет и спросит «Когда срок сдачи, на какое мыло будут присылаться запросы на авторизацию и нужен ли калькулятор заказа?»


Печатник аккумулирует всю ту работу, что наделали дизайнер с верстальщиком (эти ребята такого натворили… мама не горюй: и шрифты под Heidelberg не запихнешь - не прислали… и RGB они вместо CMYK умудрились прислать. НаводнЫе кресты – это не навОдные кресты, т.е. они не плавают по воде, хотя плавать могут и делают это с завидной регулярностью, что печатник обязан быстро исправить – это его работа. Фальцовка с биговкой, фольгирование, конгрев или блинт окажутся просто сгибом, серебрением или позолотой бумажной поверхности или теснением (выпуклым/впуклым – извините не удержалась). Какой клей используют при сшивании, сколько будет по времени проделать эту знаменитую цветокоррекцию с цветоделением, записать пост-скрипт файл и вывести наконец-то эти плетки, которые, между прочим одного цвета, хотя в итоге картинка будет цветная – все они знают - во дают эти печатники! А, короче говоря, если вы говорите печатнику: «Сделай нам миллион каталогов для выставки подстаканников» – он будет долго ругаться, но Вас поймет и спросит «Когда срок сдачи, офсет или цифра и на какой бумаге выпускаем?»


Текст не мой, но согласен на 90%.
Показать полностью
[моё] Дизайн Оформление Творчество Веб-дизайн Верстальщик Кодеры Текст
3
107
DELETED
4 года назад
Лига фрилансеров

Верстальной ностальгии пост...⁠⁠

Верстальной ностальгии пост... Фриланс, Дизайнер, Верстальщик, Ностальгия, Грустный юмор

Одна знакомая молодая супер-мега-вау фрилансер-дизайнер-верстальщик и на дуде игрец скинула мне претензию, мол я ее прадеда, которому она верстает книгу у неё переманиваю, мол я обиделся, что книгу верстать и "дизайнерить" отдали не мне, а милой и профессиональной внучке. Она все сделала, но ее прадедуля обругал её дурой безрукой, которая ничего не умеет, даже если у неё "всё перед глазами человеческим языком показано". А ведь она так старалась! Но это всё мои происки ей карьеру ломают...


Как оказалось она сканируя-набирая бумажный машинописный оригинал книги тупо пропустила все значки и отметки редактора. Нет ошибки в словах, или пометки она правила - как могла - но редактор использовала еще и старые-добрые значки :) Что оказалось выше неокрепшего ума взлетающего профи: "Я думала это просто так..."


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


¯\_(ツ)_/¯

Показать полностью 1
Фриланс Дизайнер Верстальщик Ностальгия Грустный юмор
34
Посты не найдены
О Нас
О Пикабу
Контакты
Реклама
Сообщить об ошибке
Сообщить о нарушении законодательства
Отзывы и предложения
Новости Пикабу
RSS
Информация
Помощь
Кодекс Пикабу
Награды
Команда Пикабу
Бан-лист
Конфиденциальность
Правила соцсети
О рекомендациях
Наши проекты
Блоги
Работа
Промокоды
Игры
Скидки
Курсы
Зал славы
Mobile
Мобильное приложение
Партнёры
Промокоды Biggeek
Промокоды Маркет Деливери
Промокоды Яндекс Путешествия
Промокоды М.Видео
Промокоды в Ленте Онлайн
Промокоды Тефаль
Промокоды Сбермаркет
Промокоды Спортмастер
Постила
Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии