Lopan.jp

とりとめないメモ。

HTMLとCSSのことで、よくやるやつとか、忘れそうなこと自分なりのやり方など、ただの備忘録を取り留めもなく、書き記してゆきます。

いまの自分用のメモとしてのメモ

つまりコピペ用スニペットです:D

ふくろ文字

HTML
<div class="outline-text" data-text="ふくろ文字">ふくろ文字</div>
CSS
.outline-text {
	position: relative;
	color: white;
	font-size: 100px;
	-webkit-text-stroke: .1em indigo;
}
.outline-text::before {
	content: attr(data-text);
	position: absolute;
	-webkit-text-stroke: 0;
}

3行めの末尾を三点リーダーで端折る

.excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

絶対配置をそのままレスポンシブしたいとき

.element {
	width: 323px;
	font-size: 24px;
}
@media screen and (max-width: 1200px) {
	.element {
		width: calc(323 / 1200 * 100vw);
		font-size: calc(24 / 1200 * 100vw);
	}
}

※ただし横幅いっぱいのキービジュアルのようなもの用途。

動くリンク下線

.link-underline a {
	background: linear-gradient(currentcolor, currentcolor) left bottom / 100% 1px no-repeat;
	transition: background-size .4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.link-underline a:hover {
	background-position: right bottom;
	background-size: 0 1px;
}

ローディングのくるくる

HTML
<div class="loader">
	<svg width="100" height="100" viewBox="0 0 100 100" class="svg">
		<circle cx="50" cy="50" r="40"/>
	</svg>
</div>
CSS
.loader .svg {
	fill: none;
	stroke: dodgerblue;
	stroke-width: 10;
	stroke-linecap: round;
	stroke-dasharray: 230 230;
	animation: loader 1.4s infinite cubic-bezier(.4,0,.3,1), loading 1.2s infinite linear;
}
@keyframes loader {
	from { stroke-dashoffset: 230; }
	to { stroke-dashoffset: -230; }
}
@keyframes loading {
	from { transform: none; }
	to { transform: rotate(360deg); }
}

詳細や応用や

上のソースコードについての詳細や、応用編などメモ的なことは、以下に記しています。

Comment & Pingback

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください