Jump to content

Alexej

User
 View Profile  See their activity

  • Posts

    60

  • Joined

  • Last visited

  • Days Won

    2

 Content Type 

Posts posted by Alexej

  3. Стримы HTML и CSS

    in HTML Coding

    Posted

    8 часов назад, Magic_Rabbit сказал:

    Можете хотя бы на зарубежные дать ссылку?

    В поисковике введи html/css live code. 
    их много на самом деле но толковых поискать нужно. 

  5. Отменить кликабельность ссылки

    in HTML Coding

  6. Как сверстать такой шестиугольник плавный ?

    in HTML Coding

    Posted

    3 часа назад, sigma77 сказал:

    @Alexej

    Если задний фон позволяет можно использовать контр-форму. Т.е. центральная часть прозрачная, остальное - по цвету фона.

    Ну или использоваять маски svg, если нужно кроссбраузерность и фон не однотонный. Но это то еще удовольствие. Особенно в IE )

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

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

    К сожалению нет, но вам поможет clip-path или mask http://htmlbook.ru/blog/maskirovanie-v-css 

    
http://htmlbook.ru/blog/maskirovanie-v-css

     

    Спасибо прочту. 

  7. Web Master (вёрстка + контент)

    in Job

    Posted

    13 минут назад, N_A сказал:

    Потому что это не только разработка, но и работа с контентом. Существует отдельное направление специалстов - web master (есть информация о профессии в интеренете)

    ок. буду знать, спасибо! 

  8. Как сверстать такой шестиугольник плавный ?

    in HTML Coding

    Posted · Edited by Alexej

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

    Можно так: 

    
<div></div>
    
div{
  margin: 50px;
  height: 100px;
  width: 150px;
  background: #333;
  border-radius: 20px;
  position: relative;
}
div:after, div:before{
  content: '';
  display: block;
  position: absolute;
  height: 100px;
  width: 150px;
  border-radius: 20px;
  background: #333;
}
div:after{
  transform: rotate(60deg);
}
div:before{
  transform: rotate(-60deg);
}

     

    Отлично! Только вот мне теперь на это место еще и фотку нужно закинуть, это возможно ?

    Поддержка браузерами я так понимаю это IE8 и ниже не поддерживается ?

  13. Что значит вверстка под pixelperfect ?

    in HTML Coding

    Posted

    1 час назад, AlexZaw сказал:

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

    Тут либо пробовать объяснить заказчику что это выглядит криво и не симметрично, и такая верстка займет больше времени и будет больше занимать объема, а следовательно медленнее грузится сайт, что скажется на его рейтинге (а это уже весомый аргумент ? ), либо, если заказчик упертый, смириться. Если заказчик человек адекватный он поймет что вся эта кривизна в дизайне не от большого ума дизайнера, а как раз наоборот ?

    Спасибо придется образумить заказчика. 

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

  15. Что значит вверстка под pixelperfect ?

    in HTML Coding

    Posted

    Цитата

     а pixel perfect подразумевает собой общее расположение блоков, а не небрежность/криворукость дизайнера при дизайне отдельных элементов ? Если заказчик далек оттемы веба то такой вариант может прокатить ?

    Мне нравится что вы написали выше. Но не могли бы вы подсказать статейку про PP где все это объясняется уже подробнее. Везде одно и то же в интернете и стоящий материал не находил (возможно плохо искал). 
     

    Цитата


    Вообще, на мой взгляд, это не совсем правильно, если конечно это не фишка дизайна которая согласована, а именно небрежность которая не придает дизайну шарма а режет глаз.

    Нет, никакой изюминки в моем случае в дизайне, просто один и тот же блог а именно как часто бывает в дизайне есть заголовок и наверху заголовка есть полоска + звезда, и это расстояние везде по разному где то 25 где то 27.9px а где то 31px и разумеется макет не соответствует PixelPerfect'у.    

    Цитата

    Да, и еще,  для Pixel Perfect макет должен быть подготовлен идеально (каждый отступ и размер шрифта логически обоснован)

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

     

  17. Что значит вверстка под pixelperfect ?

    in HTML Coding

    Posted

    44 минуты назад, vladmih сказал:

    В этом перфект пикселе много странностей...
    Были несколько проектов где перфект пиксель для них было очень важно...
    Так приходилось даже у текстов подгонять letter-spacing, и то сходилось не полностью, т.к. рендер шрифтов в вебе и псд макетах не был одинаков...

    еще и разные браузеры по разному рендерят их =( 

    6 часов назад, AlexZaw сказал:

    Значит все элементы на странице у вас должны располагаться точно так же как и в макете. С точностью до пикселя.
    Если есть отступ на макете в 17 пикселей, он и должен быть 17px, не 15, не 20, а именно 17. Если элемент, по логике, должен стоять по ценртру, а на макете он немного смещен, то и нужно делать его с таким же смещением.

    Есть мнение что большинство заказчиков сами не знают что это такое, но слышали что это круто.

    Вот у меня такая ситуация. В ТЗ заказчик написал по БЭМ React + PixelPerfect. И самое главное что бэм как бы должен убирать копи паст но из за PP приходится одинковым блокам разные модификаторы прописывать просто потому что в макете дизайнер у заголовоков и обзацах разный отступ указал, - это нормально вообще так делать ?  

  21. Стримы HTML и CSS

    in HTML Coding

    Posted

    В 01.07.2018 в 22:17, Magic_Rabbit сказал:

    Добрый день. Подскажите, пожалуйста, есть ли где на просторах ютуба или другого видеохостинга канал с хорошими стримами вёрстки html? Всё что нахожу на ютубе это видео «Как сверстать макет с нуля за час», но хотелось бы посмотреть что-то в формате стрима, как человек решает типовые задачи. То есть, смотрим, как верстальщик работает с вёрсткой. Думаю, многим новичкам было бы полезно посмотреть, как люди работают с кодом. 

    зарубежные встречал, наших не видел. 

  23. Блок со скошенными краями

    in HTML Coding

    Posted

    2 часа назад, vladmih сказал:

    Охренеть за 6 лет практики, даже не знал что блоки с прозрачностью не накладываются фонами друг на друга((((
    Смотрю, и думаю че за магия нах происходит, должны же накладываться... Потом в Вашем примере прописал цвет в rgba и они накладываются.

    Даже как-то стыдно за себя... Или очередное подтверждение выражению "век живи, век и учись"...

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

        

  24. Как в HTML5 разбить страницу на фреймы с отдельной html страницей в каждом

    in HTML Coding

    Posted 

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.top {
			width: 100%;
			height: 300px;
		}
		
		.wrapper {
			width: 100%;
			display: flex;
			flex-direction: row;
		}

		.menu {
			width: 50%;
			height: 600px;
			
		}
		
		.table {
			width: 50%;
			height: 600px;
		}


		.footer {
			width: 100%;
			height: 300px;
		}

	</style>
</head>
<body>
	<div class="top">
		<iframe src="https://htmlforum.io/topic/59364-kak-v-html5-razbit-stranicu-na-freymy-s-otdelnoy-html-stranicey-v-kazhdom/" width="100%" height="300px">
	</div>
	<div class="wrapper clearfix">
		<div class="table">
			<iframe src="https://htmlforum.io/topic/59364-kak-v-html5-razbit-stranicu-na-freymy-s-otdelnoy-html-stranicey-v-kazhdom/"width="100%" height="300"></iframe>
		</div>
		<div class="menu">
			<iframe src="https://htmlforum.io/topic/59364-kak-v-html5-razbit-stranicu-na-freymy-s-otdelnoy-html-stranicey-v-kazhdom/" width="100%" height="300"></iframe>
		</div>
	</div>
	<footer class="footer">
		<iframe src="https://htmlforum.io/topic/59364-kak-v-html5-razbit-stranicu-na-freymy-s-otdelnoy-html-stranicey-v-kazhdom/" width="100%" height="300"></iframe>
	</footer>
</body>
</html>

    Что то типа этого. 

  25. Блок со скошенными краями

    in HTML Coding

    Posted

    12 часов назад, Alex Def сказал:

    Ээээ... скошенные края блоков градиентом? Можно пример?

     

    Угу, крайние блоки так и сделал, правда пришлось отказаться от прозрачного background.

    А вот центральный блок по прежнему вызывает вопросы.

    http://css.yoksel.ru/css-patterns/ - думаю тут достаточно примеров. 

    Если градиент не подойдет то:

      

        border-left: 50vw solid transparent;
    border-right: 50vw solid transparent;
    border-top: 110px solid #fff;

     


     

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept