All you need is CSS

MinskCSS Meetup #1

Привет!

Меня зовут Анна Селезнёва, и я марсианка

Сайт: evilmartians.com

Блог: evilmartians.com/chronicles

Задачи: cultofmartians.com

				.arrow {
	position: relative;
	width: 1em;
	height: 1em;
}
.arrow::before, .arrow::after {
	content: '';
	position: absolute;
	border-width: .2em;
}

				.arrow::after {
	width: ;
	height: ;
	border-top-style: solid;
	border-right-style: solid;
	transform: rotate(45deg);
}

				 = 1em / 2 * sqrt(2) = .7em
.arrow::after {
	width: .7em;
	height: .7em;
	top: .15em;
	left: .15em;
}

Во всех примерах считается, что значение box-sizing: border-box

				.arrow::before {
	top: .4em;
	width: ;
	border-top-style: solid;
}

				
 = 1em - (.2em / 2) = .9em

				.menu {
	position: relative;
	width: 1em;
	height: 1em;
}

.menu::before, .menu::after {
	content: '';
	position: absolute;
	width: 100%;
	height: .2em;
	background-color: currentColor;
}

				.menu {
	position: relative;
	width: 1em;
	height: 1em;
	padding: .4em 0;
	background-color: currentColor;
	background-clip: content-box;
}

				.menu::before {
  top: 0;
}
.menu::after {
  top: .8em;
}

				.menu_opened::before,
.menu_opened::after {
  top: .4em;
}

				.menu_opened::before{
  transform: rotate(-45deg);
}
.menu_opened::after {
  transform: rotate(45deg);
}

				.menu_opened::before{
  transform: rotate(-45deg) scaleX(1.2);
}
.menu_opened::after {
  transform: rotate(45deg) scaleX(1.2);
}

				.menu_opened {
	background-color: transparent;
}

Click ;)

				.user {
	width: 1em;
	height: 1em;
}
.user::before,
.user::after {
	content: '';
	display: block;
	background-color: currentColor;
}

				.user::before {
	width: .45em;
	height: .45em;
	margin: 0 auto;
	border-radius: 50%;
}

.user::after {
	margin: .05em auto;
	width: .8em;
	height: .5em;
	border-radius: 100% 100% 0 0;
}

top-left-h  top-right-h  bottom-right-h  bottom-left-h
/
top-left-v  top-right-v  bottom-right-v  bottom-left-v

.user::after {
	margin: .05em auto;
	width: 1em;
	height: .5em;
	border-radius: .5em .5em 0 0;
}

				
50% 50% 50% 50% / 100% 100% 0 0 = 50%/100% 100% 0 0

.semicircle {
	width: 150px;
	height: 300px;
	border-radius: 0 300px 300px 0;
	background: #000;
}

				
0 200% 200% 0 / 100% 100% 100% 100% = 0 200% 200% 0/100%

.sector {
	width: 250px;
	height: 250px;
	border-radius: 100% 0 0 0;
	background: #000;
}

.borders {
	width: 0; height: 0;
	border-style: solid;
	border-width: 150px;
	border-top-color: black ;
	border-right-color: blue ;
	border-bottom-color: yellow ;
	border-left-color: gray ;
}

.triangle {
	position: relative;
	width: 200px;
	height: 320px;
}

arctan(200 / 320) = 32deg

.triangle {
	position: relative;
	width: 200px;
	height: 320px;
	overflow: hidden;
}

.triangle::before {
	content: '';
	position: absolute;
	left: 100%;
	width: 100%;
	height: ;
	background: #000;
	transform-origin: 0 0;
	transform: rotate(32deg);
}


 = 100% / cos(32deg) = 118%

.triangle::before {
	height: 118%;
}

.parallelogram {
	position: relative;
	width: 400px;
	height: 200px;
}

.parallelogram::before {
	content: '';
	position: absolute;
	width: ;
	height: 100%;
	transform-origin: 0 100%;
	transform: skew(-30deg);
	background: #000;
}

️️

.parallelogram::before {
	width: 71.1%;
}

				

️ = 100% * height / width = 50%
 = 50% * tan(30deg) = 28.9%
 = 100% - 28.9% = 71.1%

I have a pen

I have a code

Ugh!

CodePen

.parallelogram::before {
	z-index: -1;
}
.parallelogram-content {
	margin: 0 ;
}

				️ = 100% * height / width = 50%
 = 50% * tan(30deg) = 28.9%

I have a pen

I have a code

Ugh!

CodePen

.parallelogram {
	pointer-events: none;
}
.parallelogram-content {
	pointer-events: auto;
}

I have a pen

I have a code

Ugh!

CodePen

				

 = 71.1% / 100% = 0.711
 = 400px * 0.711 = 284px

.parallelogram {
	width: ;
	height: 200px;
	transform-origin: 0 100%;
	transform: skew(-30deg);
}
.parallelogram-content {
	transform-origin: 0 0;
	transform: skew(30deg);
}

.parallelogram {
	overflow: hidden;
}
.parallelogram-content {
	margin-left: ;
}

				 = 100% / 71.1% * 100% = 140.65%
 = 100 - 140.65% = -40.65%

I have a pen

I have a code

Ugh!

CodePen

.parallelogram-content {
	/* no transform */
}
.parallelogram-content p {
	transform-origin: 0 0;
	transform: skew(30deg);
}

.hexagon {
	width: 200px;
	overflow: hidden;
}
.hexagon-wrapper {
	padding-bottom: ;
	transform: rotate(-60deg) skewY(30deg);
}
 = 100% * 2 / sqrt(3) = 115.5%

.hexagon-content {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: skewY(-30deg) rotate(60deg);
}

<div class="hexagon">
  <div class="hexagon-wrapper">
    <div class="hexagon-content"></div>
  </div>
</div>

.hexagon {
	width: 25%;
}

.hexagon:nth-child(7n+1) {
	margin-left: 12.5%;
}
.hexagon:nth-child(n+4) {
	margin-top: ;
}
 = 100% * (2 / sqrt(3) - 1) / 2) = -7.75%

.adaptive {
	width: X;
}
.adaptive::before {
	content: '';
	display: block;
	width: 100%;
	padding-top: 100%;
}

.adaptive::before {
	content: '';
	display: block;
	width: 100%;
	padding-top: ;
}

 = height / width = 66.666%

clip-path

caniuse.com/#search=clip-path

.rhombus {
	/* webkit */
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.rhombus {
	/* moz */
	clip-path: url(#rhombus);
}

<svg width="0" height="0">
	<defs>
		<clipPath id="rhombus">
			...
		</clipPath>
	</defs>
</svg>

<svg width="0" height="0">
	<defs>
		<clipPath id="rhombus"
			clipPathUnits="objectBoundingBox">
			<polygon points=".5 0, 1 .5, .5 1, 0 .5"/>
		</clipPath>
	</defs>
</svg>
/* polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) */

<svg class="rhombus">
	<use xlink:href="#rhombus"/>
</svg>

CSS:
.rhombus {
	width: 400pxX;
	height: 200pxY;
}

<svg width="0" height="0">
	<symbol id="rhombus" viewBox="0 0 1 1"
		preserveAspectRatio="none">
		<polygon points=".5 0, 1 .5, .5 1, 0 .5"/>
	</symbol>
</svg>

CSS ♥ SVG

.rhombus {
	width: 400px;
	height: 200px;
	background-image: url();
}

 = "data:image/svg+xml,
%3Csvg xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 1 1' preserveAspectRatio='none'%3E
%3Cpolygonpoints='.5 0, 1 .5, .5 1, 0 .5'/%3E%3C/svg%3E"

"data:image/svg+xml,
	%3Csvg xmlns='http://www.w3.org/2000/svg'
		viewBox='0 0 1 1'
		preserveAspectRatio='none'
	%3E
		%3Cpolygonpoints='.5 0, 1 .5, .5 1, 0 .5'/%3E
	%3C/svg%3E"

"data:image/svg+xml,
	<svg xmlns='http://www.w3.org/2000/svg'
		viewBox='0 0 1 1'
		preserveAspectRatio='none'
	>
		<polygon points='.5 0, 1 .5, .5 1, 0 .5'/>
	</svg>"

CSS clip-path maker: bennettfeely.com/clippy/

Пример

<button class="button" data-label="Read more">
	Read more
</button>

				 = height * tan(32deg)

.button {
	position: relative;
	height: 4em;
	padding: 0 ;
	font-size: 40px;
	line-height: 4em;
	overflow: hidden;
	text-align: left;
} /* + border-radius, background, color, ... */
height = 4em
 = 4em * tan(32deg) = 2.5em

.button::before,
.button::after {
	position: absolute;
	top: 0;
	height: 100%;
	right: calc(100% + );
	transition: right 2s;
}

.button::before {
  content: '';
  left: -;
  background: #000;
  transform: skew(-32deg);
}

.button::after {
	content: attr(data-label);
	left: ;
	white-space: nowrap;
	overflow: hidden;
	color: #fff;
}


.button:hover::before,
.button:hover::after {
	right: -;
}

Спасибо!

Презентация создана с помощью Shower