Top western road trips Top western road trips Top western road trips
Top western road trips
Top western road trips
border image
border-image プロパティは、firefox等で、うまく動かない事もあったりして、うまく動かすための記述をメモに残します。
.border09{ border: 16px solid transparent; -moz-border-image: url(https://tenman.info/labo/css/files/border4.png) 30 30 30 30 repeat repeat; -webkit-border-i ... .border06{
width:100%;
height:3px;
background-image: repeating-linear-gradient(-45deg,rgb(26,198,204),rgb(26,198,204) 3px, rgb(255,255,255) 6px);
}
.border07{ width: 100%; height: 3px; background: radial-gradient(c ... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco la ...
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Dui ...
CSS Filter の効果で背景をぼかしています。
<div class="body" style="height:300px;"> <div class="section"> <h1>背景をぼかすボックス</h1> <p>CSS Filter の効果で背景をぼかしています。</p> </div> </div>
.body{ padding:3em; } .section h1,.section p{ text-ali ... レスポンシブデザインでWEBページを作成する場合、一定のアスペクト比を持ったブロック内に、テキストを記述した場合
px サイズで記述してしまうと、固定サイズなので、スクリーンサイズが小さくなった場合に、テキストがはみ出してしまうといった事が発生します。
レスポンシブデザインでは、テキストのサイズを相対的な単位で書くことが推奨されています。例えば、%やem rem等です。
親ブロックに、フォントサイズを指定し ...
Embracing fluid typography might be easier than you think. It has wide browser support, is simple to implement and can be achieved without losing control over many important aspects of design. Unlike responsive typography, which changes on ...