WEBデザインのテクニックを画像4枚でわかりやすく教えてくれるアカウント「小林 I Webデザイナー」さん。
要素の強弱の付け方をメインに配色アイデアや小技まで、すぐに使えるアイデアを発信してくれています。
最近見たポストでかなり有益だなと思ったのがこちら。
背景を馴染ませるCSS pic.twitter.com/pvXdERWoT2
— 小林 I Webデザイナー (@pulpxstyle) July 3, 2024
わ、わ、わかりやすうううい！！
プレビューのすぐ下に短いCSS。widthとかpositionを省いてポイントのみ伝えているところがわかりやすさの秘訣ですね。
恥ずかしながらつい最近知ってフォローしました。友人たちが結構フォローしててびっくりしました。
アイデアが欲しい時にTL眺めようと思ってます！
ではでは。
こんにちは。ささめまです。
仕事でYoutubeの運用を始めたときに参考にしたブログがカッコ良かったのでご紹介します。
背景にある白抜きの大きなBLOGという文字、ハイライトできるんですよ…。かっこいいわぁ
シンプルにまとまっていて情報も飲み込みやすく、とってもいいデザイン！とにかく読みやすいのがいい。企業サイトで久々に感動しました。
覗きに行く度にソースを写経しようと思いつつそんな余裕もなく何もできていないのですが、これを機にやってみたい！と思いまする。
本当に簡単な紹介になってしまいましたがメモ程度に。
ではでは。
こんにちは。ささめまです。
線との組み合わせボタンがやっぱりなんとなく好きで、
また使いたいので作り方の備忘録です。
＼ コピペでそのまま使えます ／
demo
html
<a href="#" class="button_link">button</a>css
.button_link {
width: 280px;
height: 60px;
color: #353535;
text-align: center;
text-decoration: none;
font-weight: 600;
line-height: 60px;
background-color: #bdefea;
border-radius: 50vh;
display: block;
position: relative;
transition: 0.3s;
}
.button_link::before {
content: '';
width: 40px;
height: 40px;
background-color: #fff;
border-radius: 50vh;
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
}
.button_link::after {
content: '';
width: 7px;
height: 7px;
border-top: 3px solid #353535;
border-right: 3px solid #353535;
position: absolute;
top: 50%;
right: 27px;
transform: translateY(-50%) rotate(45deg);
}
.button_link:hover {
background-color: #81d8d0;
}design
右端に「 > 」とか「→」がつくボタン、よくあるデザインだけど
正直ちょっとめんどくさいなと思っていたので
こういうシンプルめの記述で再現できるようになったのは
とっっっっってもありがたいです！
::after要素のwidthとheightでくの字矢印の長さを、border-topとborder-rightで太さを変えられます。大きさ自由自在☆
マークアップ言語を覚えたての2014年頃、
ボタンの箱の中に文字+矢印のデザインが大流行。
font-awsomeの矢印達とはマブダチでした。
(font-awsomeの矢印をfloatかpositionで配置するやつ)
それがfont-awsomeから矢印引っ張らなくてよくなって
floatもいらない！positionは使うけど！cssだけで簡単！
便利になって感激です。
もう矢印ボタンは怖くない。
リクエストされてもニコニコで受け付けます^^
ではでは。
こんばんは。ささめまです。
このボタンをより確実に再現する方法を試していたらこんな時間になってしまいました…。
実ったので紹介させてください。
＼ コピペでそのまま使えます ／
demo
html
<div class="button_link">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="goo">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur>
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo"></feColorMatrix>
<feComposite in="SourceGraphic" in2="goo"></feComposite>
</filter>
</defs>
</svg>
<span class="button--bubble__container">
<a href="#campaign" class="button button--bubble">
button
</a>
<span class="button--bubble__effect-container">
<span class="circle top-left"></span>
<span class="circle top-left"></span>
<span class="circle top-left"></span>
<span class="button effect-button"></span>
<span class="circle bottom-right"></span>
<span class="circle bottom-right"></span>
<span class="circle bottom-right"></span>
</span>
</span>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenLite.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineLite.min.js"></script>
<script id="rendered-js">
$('.button--bubble').each(function () {
var $circlesTopLeft = $(this).parent().find('.circle.top-left');
var $circlesBottomRight = $(this).parent().find('.circle.bottom-right');
var tl = new TimelineLite();
var tl2 = new TimelineLite();
var btTl = new TimelineLite({ paused: true });
tl.to($circlesTopLeft, 1.2, { x: -25, y: -25, scaleY: 2, ease: SlowMo.ease.config(0.1, 0.7, false) });
tl.to($circlesTopLeft.eq(0), 0.1, { scale: 0.2, x: '+=6', y: '-=2' });
tl.to($circlesTopLeft.eq(1), 0.1, { scaleX: 1, scaleY: 0.8, x: '-=10', y: '-=7' }, '-=0.1');
tl.to($circlesTopLeft.eq(2), 0.1, { scale: 0.2, x: '-=15', y: '+=6' }, '-=0.1');
tl.to($circlesTopLeft.eq(0), 1, { scale: 0, x: '-=5', y: '-=15', opacity: 0 });
tl.to($circlesTopLeft.eq(1), 1, { scaleX: 0.4, scaleY: 0.4, x: '-=10', y: '-=10', opacity: 0 }, '-=1');
tl.to($circlesTopLeft.eq(2), 1, { scale: 0, x: '-=15', y: '+=5', opacity: 0 }, '-=1');
var tlBt1 = new TimelineLite();
var tlBt2 = new TimelineLite();
tlBt1.set($circlesTopLeft, { x: 0, y: 0, rotation: -45 });
tlBt1.add(tl);
tl2.set($circlesBottomRight, { x: 0, y: 0 });
tl2.to($circlesBottomRight, 1.1, { x: 30, y: 30, ease: SlowMo.ease.config(0.1, 0.7, false) });
tl2.to($circlesBottomRight.eq(0), 0.1, { scale: 0.2, x: '-=6', y: '+=3' });
tl2.to($circlesBottomRight.eq(1), 0.1, { scale: 0.8, x: '+=7', y: '+=3' }, '-=0.1');
tl2.to($circlesBottomRight.eq(2), 0.1, { scale: 0.2, x: '+=15', y: '-=6' }, '-=0.2');
tl2.to($circlesBottomRight.eq(0), 1, { scale: 0, x: '+=5', y: '+=15', opacity: 0 });
tl2.to($circlesBottomRight.eq(1), 1, { scale: 0.4, x: '+=7', y: '+=7', opacity: 0 }, '-=1');
tl2.to($circlesBottomRight.eq(2), 1, { scale: 0, x: '+=15', y: '-=5', opacity: 0 }, '-=1');
tlBt2.set($circlesBottomRight, { x: 0, y: 0, rotation: 45 });
tlBt2.add(tl2);
btTl.add(tlBt1);
btTl.to($(this).parent().find('.button.effect-button'), 0.8, { scaleY: 1.1 }, 0.1);
btTl.add(tlBt2, 0.2);
btTl.to($(this).parent().find('.button.effect-button'), 1.8, { scale: 1, ease: Elastic.easeOut.config(1.2, 0.4) }, 1.2);
btTl.timeScale(2.6);
$(this).on('mouseover', function () {
btTl.restart();
});
});
//# sourceURL=pen.js
</script>
</div>css
.button_link {
text-align: center;
}
.button_link .button {
background-color: #81d8d0;
border: none;
color: #fff;
display: inline-block;
font-size: 14px;
text-decoration: none;
color: #fff;
padding: 20px 40px;
transition: all 0.1s ease-out;
}
.button_link .button:active {
transform: scale(0.95);
}
.button_link .button--bubble {
position: relative;
z-index: 2;
}
.button_link .button--bubble:hover {
background: none;
}
.button_link .button--bubble:hover + .button--bubble__effect-container .circle,
.button_link .button--bubble:hover + .button--bubble__effect-container .button {
background: #81d8d0;
}
.button_link .button--bubble:active + .button--bubble__effect-container {
transform: scale(0.95);
}
.button_link .button--bubble__container {
position: relative;
display: inline-block;
}
.button_link .button--bubble__container .effect-button {
position: absolute;
width: 50%;
height: 25%;
top: 50%;
left: 25%;
z-index: 1;
transform: translateY(-50%);
transition: 0.1s ease-out;
}
.button_link .button--bubble__effect-container {
position: absolute;
display: block;
width: 200%;
height: 400%;
top: -150%;
left: -50%;
filter: url("#goo");
transition: all 0.1s ease-out;
pointer-events: none;
}
.button_link .button--bubble__effect-container .circle {
position: absolute;
width: 25px;
height: 25px;
border-radius: 15px;
transition: 0.1s ease-out;
}
.button_link .button--bubble__effect-container .circle.top-left {
top: 40%;
left: 27%;
}
.button_link .button--bubble__effect-container .circle.bottom-right {
bottom: 40%;
right: 27%;
}
.button_link .goo {
position: absolute;
visibility: hidden;
width: 1px;
height: 1px;
}design
マウスオーバーするとぷにっともちっとお餅がちぎれます。
svgで繋ぎ目をなめらかにしたりと手の込んだボタンです。
本家様ではマウスオーバー中background-colorが変わり続けるのですが、シンプルで使いやすい方がいいかなと思ってbackground-colorは固定にしました。かわいい。
comment
参考サイトを見た時に
え、これかわいすぎる！
と思ってお持ち帰らせていただこうとするも、普通にコピーするだけじゃ全然ぷにっと動かなくて当ブログ環境まで持ってきて実験しておりました。
結構読み込むjsが多くてhtmlに書いてある分はどれか1つ抜けても動かなくなります。もっと簡素にできないかな…とも思うのですがjsど素人で歯が立ちませんでした(;_;)ちゃんと勉強します。
参考にさせていただいたのはこちらです
https://lab.sonicmoov.com/markup/css/hover-css/
>バブルが可愛らしいButton bubble effect
ではでは
こんにちは。ささめまです。
線との組み合わせボタンがやっぱりなんとなく好きで、
また使いたいので作り方の備忘録です。
＼ コピペでそのまま使えます ／
demo
html
<a href="#" class="button_link">button</a>css
.button_link {
width: 280px;
height: 40px;
color: #ffffff;
text-align: center;
text-decoration: none;
background-color: #bdefea;
box-shadow: 0 0 15px rgba(0 0 0 / .2);
border-radius: 6px;
display: block;
transition: 0.5s;
}
.button_link:hover {
text-decoration: none;
background-color: #81d8d0;
box-shadow: 0 0 10px rgba(0 0 0 / 0);
}design
AppStoreのトップ画面って記事1つ1つにぼわぁぁ〜っとした影がついていて、ポチッとタップできることがわかりますよね。
確かグッドデザイン賞的な何かを受賞していた気がします。
今回ご紹介したのはボタンですが、記事詳細へのリンクにより似合うと思います。
影のぼわぁぁ〜感を大事にしたかったのでtransitionを0.5sにして余韻をたっぷりめにしました。
どこかでお役に立てば嬉しいです。
ではでは。
こんにちは。ささめまです。
線との組み合わせボタンがやっぱりなんとなく好きで、
また使いたいので作り方の備忘録です。
＼ コピペでそのまま使えます ／
demo
html
<a href="#" class="button_link">button</a>css
.button_link {
width: 280px;
height: 40px;
color: #ffffff;
font-weight: 700;
text-align: center;
text-decoration: none;
background-color: #bdefea;
display: block;
transition: 0.3s;
}
.button_link::before {
content: '';
width: 100%;
height: 100%;
top: -5px;
left: -5px;
border: 2px solid #81d8d0;
position: absolute;
transition: 0.2s;
}
.button_link:hover::before {
top: 0;
left: 0;
}
.button_link:hover {
color: #ffffff;
text-decoration: none;
background-color: #81d8d0;
}design
ファッション系のサイトで使われているイメージがあります。
幾何学模様とかと相性が良いのではないでしょうか。
その時は:hover時のbackground-colorは変えないとか
線より薄めの色だとかわいい感じに仕上がると思います。
ではでは
こんにちは。ささめまです。
平行四辺形のボタンってかっこいいですよね…！
作り方のメモ残しておきます。
＼ コピペでそのまま使えます ／
demo
html
<a href="#" class="button_link">
<span>button</span>
</a>css
.button_link {
width: 280px;
height: 40px;
color: #81d8d0;
text-align: center;
text-decoration: none;
background: transparent;
display: block;
border: solid 2px #81d8d0;
transition: all 200ms ease-in;
transform: skew(-10deg);
}
.button_link:hover {
color: #ffffff;
background-color: #81d8d0;
}
.button_link span {
font-weight: 600;
display: inline-block;
transform: skew(10deg);
}design
かっこいーい！
シンプルだけどボタンがちょっとこう凝ってるだけで
このサイトおしゃれだなぁっていう印象になりますよね。
平行四辺形ボタン好きだからいろんなサイトで使われてほしいです！使ってね。
ではでは
こんにちは。ささめまです。
ボタンの枠が塗りつぶされていくcssをご紹介します。
＼ コピペでそのまま使えます ／
demo
html
<a href="#" class="button_link">
<p>button</p>
<div class="hover"></div>
<div class="hover_bottom"></div>
</a>css
.button_link {
width: 280px;
height: 40px;
text-decoration: none;
display: block;
border: solid 2px #eeeeee;
position: relative;
}
.button_link p {
margin: 0 auto;
color: #81d8d0;
text-align: center;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.button_link:hover .hover:before,
.button_link:hover .hover:after {
opacity: 1;
-webkit-animation: openA 0.4s;
animation: openA 0.4s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
animation-direction: normal;
}
.button_link:hover .hover_bottom:before,
.button_link:hover .hover_bottom:after {
opacity: 1;
-webkit-animation: openB 0.4s;
animation: openB 0.4s;
animation-delay: 0.4s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
animation-direction: normal;
}
.hover {
width: 100%;
height: 40px;
position: absolute;
top: -2px;
}
.hover:before {
content: "";
width: 0;
height: 0;
border-top: solid 2px #81d8d0;
border-left: solid 2px #81d8d0;
display: block;
opacity: 0;
position: absolute;
right: 138px;
}
.hover:after {
content: "";
width: 0;
height: 0;
border-top: solid 2px #81d8d0;
border-right: solid 2px #81d8d0;
display: block;
opacity: 0;
position: absolute;
left: 138px;
}
.hover_bottom {
width: 100%;
height: 40px;
position: absolute;
bottom: -2px;
}
.hover_bottom:before {
content: "";
width: 0;
height: 40px;
border-bottom: solid 2px #81d8d0;
display: block;
opacity: 0;
position: absolute;
right: 0;
}
.hover_bottom:after {
content: "";
width: 0;
height: 40px;
border-bottom: solid 2px #81d8d0;
display: block;
opacity: 0;
position: absolute;
left: 0;
}
@keyframes openA {
0% {
width: 0;
height: 0;
}
50% {
width: 140px;
height: 0;
}
100% {
width: 140px;
height: 40px;
}
}
@keyframes openB {
0% {
width: 0px;
}
100% {
width: 140px;
}
}design
私が紹介するボタンにしてはcssが長いですね笑
シンプルな線のボタンですが、一味違うなと思わせるアニメーションです。
私自身がフロントエンドをやっていることもあってか、工夫してるなーと感心したボタンデザインでした。
※実際サイズとか形変えたりしようとするとpositionの調整が必要で、なかなか大変でした！！
でも完成品はとてもかっこいい…！やる価値はあると思います。
ではでは
こんにちは。ささめまです。
生きてます！！死にそうになってたけど！出産しました！わーい
今回はネオンサインのように光るボタンをご紹介します。
＼ コピペでそのまま使えます ／
demo
code
<a href="#" class="button_link">button</button>.button_link {
width: 280px;
height: 40px;
color: #ffffff;
font-weight: 600;
text-align: center;
text-decoration: none;
background-color: #81d8d0;
display: block;
transition: all 0.3s ease;
}
.button_link:hover {
text-shadow:
0 0 10px rgba(255,255,255, 1),
0 0 50px rgba(255, 255, 255, .8),
0 0 75px rgba(255, 255, 255, .6),
0 0 76px rgba(255, 255, 255, .4),
0 0 77px rgba(255, 255, 255, .5),
0 0 78px rgba(255, 255, 255, .4),
0 0 79px rgba(255, 255, 255, .3),
0 0 80px rgba(255, 255, 255, .2),
0 0 85px rgba(255, 255, 255, .1);
}design
シャドウをいじくってネオンが光るようにジワッと光らせます。
黒背景のサイトに絶対とってもよく映える！！！！
タイトルとかにもおすすめなcssなのでぜひ使ってみてください
こんにちは。ささめまです。
モードとかシンプルとかオシャレという言葉が似合うサイトに使いたいホバーエフェクトをご紹介します。
＼ コピペでそのまま使えます ／
demo
code
<a href="#" class="button_link">button</a>.button_link {
width: 280px;
color: #81d8d0;
font-weight: 600;
text-align: center;
text-decoration: none;
border: 2px solid #81d8d0;
background: transparent;
display:block;
position: relative;
transition:all 0.3s ease-in-out;
}
.button_link:before,
.button_link:after {
content: '';
width: 18px;
height: 18px;
border-color: #81d8d0;
box-sizing: border-box;
border-style :solid;
display: block;
position: absolute;
transition: all 0.3s ease-in-out;
}
.button_link:before {
top: -6px;
left: -6px;
border-width: 2px 0 0 2px;
z-index: 5;
}
.button_link:after {
bottom: -6px;
right: -6px;
border-width: 0 2px 2px 0;
}
.button_link:hover:before,
.button_link:hover:after {
width: calc(100% + 12px);
height: calc(100% + 12px);
border-color: #81d8d0;
}
.button_link:hover {
color: #fff;
background-color: #81d8d0;
border-color: #81d8d0;
}design
カギカッコのようにボタンを囲った線を、マウスオーバーでしゅっと伸ばすcssです。
オシャレ感ある。
フォントを変えるとモード感が出るので、遊びのあるサイトで使ってみたいなあと思ってます。
