EugeneKiyash

если кто захочет посмотреть, поменялся адрес:

http://matrix1320.xyz/mountain/

В 16.02.2017 в 21:24, EugeneKiyash сказал:

Да, беру оттуда макеты на тренировку.

C рамкой на заднем фоне разобрался - https://eugene-ki.github.io/. Отрезал голову мужику и вставил как bg-i псевдоэлементу, +поигрался с z-index-ми. И пришлось применить свойство clip чтобы обрезать этот элемент до примерного размера головы мужика, чтобы не закрывал другие элементы, т.к. полноценно через z-index-ы сделать не получилось.

Ну вроде все норм, работает везде(ie9+)

 

Еще один из этой рассылки уже сделал, пытаясь принести каплю адаптивности через @media_queries: http://matrix1320.xyz/panakeia/

Ошибся! Поддержка  ie10+. Забыл про Flexbox

В 14.02.2017 в 21:41, mrnobody сказал:

А вы макет взяли из рассылки HTML Academy? А то я смотрю в рассылке такой же.

Да, беру оттуда макеты на тренировку.

C рамкой на заднем фоне разобрался - https://eugene-ki.github.io/. Отрезал голову мужику и вставил как bg-i псевдоэлементу, +поигрался с z-index-ми. И пришлось применить свойство clip чтобы обрезать этот элемент до примерного размера головы мужика, чтобы не закрывал другие элементы, т.к. полноценно через z-index-ы сделать не получилось.

Ну вроде все норм, работает везде(ie9+)

Еще один из этой рассылки уже сделал, пытаясь принести каплю адаптивности через @media_queries: http://matrix1320.xyz/panakeia/

Я только начал заниматься версткой. И как по мне, лучше сначала изучить стандартные инструменты и возможности css (конкретно сейчас я о @media_queries), а потом уже изучать фреймворки, которые упрощают работу с этими инструментами.

Но bootstrap тоже в планах освоить, хорошие возможности предоставляет, особенно что касается сетки.

7 часов назад, Tilonorrinco сказал:

Мужика тоже можно сделать через псевдоэлемент.

https://jsfiddle.net/bth3uuL4/3/

 

В общем так и сделал! До-верстаю - выложу, покажу!

А чтобы мужика отдельным блоком не вставлять. как думаете, можно???

Есть макет с эффектом рамки на заднем фоне.

Как считаете как лучше реализовать этот эффект? Как бы сделали это вы?

border || border-image || svg || css-mask

Или что-то другое???

Спасибо!

Кому интересно -  ССЫЛКА на весь макет!

Нужна помощь! 

Начал разбираться со свойством 'clip-path'. Оно пока мало поддерживается браузерами. Полноценно только -webkit-браузерами. Поддержка Firefox имеется, но только через "external-link" - clip-path: url(#foo) и описании svg в html. У меня возникла проблема реализации именно последним способом:

Вот реализация через clip-path в css (работает только на -webkit-):

Захотел сделать тоже самое только через external-link для поддержки Firefox, описал те же polygon в svg и меня ничего не работает, в чем именно я допустил ошибку?

Знаю, что будут проблемы с transition со второй реализацией, но это лучше чем ничего!

Заранее спасибо за помощь!

5 часов назад, BrusSENS сказал:

Посмотрел первый - довольно не плохо, для начала, но...

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

<meta name="viewport" content="width=device-width, initial-scale=1">

2. Почему в <section> Вы используете заголовок 2 уровня? Семантика нарушается, имхо. Спецификация HTML5 позволяет использовать заголовок первого уровня несколько раз на странице. А section, main, aside, article - независимые контейнеры, поэтому, лично я, использовал бы заголовки первого уровня для таких контейнеров.

А так с виду всё довольно чистенько, аккуратненько.

Спасибо за замечания!

В планах как раз усилено заняться изучением адаптации страниц.

Сейчас поправил отображение на мобилках с помощью meta-viewport.

Около месяца изучаю HTML, СSS. Начал верстать первые лендинги, пока в фиксе. Посмотрите, оцените. Не откажусь от конструктивной критики.

Спасибо!

http://matrix1320.xyz/cuda/

http://matrix1320.xyz/strict/