とりとめないメモ。
HTMLとCSSのことで、よくやるやつとか、忘れそうなこと、自分なりのやり方など、ただの備忘録を取り留めもなく、書き記してゆきます。
いまの自分用のメモとしてのメモ
つまりコピペ用スニペットです:D。
ふくろ文字
<div class="outline-text" data-text="ふくろ文字">ふくろ文字</div>.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;
}詳細や応用や
上のソースコードについての詳細や、応用編などメモ的なことは、以下に記しています。
Comment & Pingback