上級編│xx

HTML

CSS

@media screen and (max-width: 699px) {
/*スマホ：現在編集中*/}
@media screen and (min-width: 700px) {
/*PC：画像にいろんなエフェクトを加えよう>ドットシャドウ*/
.work-image-effect-dotshadow{z-index:2;position:relative;width:500px;}
.work-image-effect-dotshadow:before{content:"";position:absolute;bottom:-20px;right:20px;width:100%;height:100%;background-image:radial-gradient(#ccff33 30%,transparent 31%),radial-gradient(#ccff33 30%,transparent 31%);background-size:12px 12px;background-position:0 0,12px 12px;z-index:2;}
.work-image-effect-dotshadow img{position:relative;z-index:4;width:100%;}

/*PC：画像にいろんなエフェクトを加えよう>ドットマスク*/
.work-image-effect-dotmask{z-index:2;position:relative;width:500px;}
.work-image-effect-dotmask:before{content:"";position:absolute;bottom:0px;right:0px;width:100%;height:100%;background-image:radial-gradient(#fff 30%,transparent 31%),radial-gradient(#fff 30%,transparent 31%);background-size:12px 12px;background-position:0 0,12px 12px;z-index:2;}
.work-image-effect-dotmask img{position:relative;z-index:1;width:100%;}

/*PC：画像にいろんなエフェクトを加えよう>写真アルバム風*/
.work-image-effect-likephoto{z-index:2;position:relative;width:500px;}
.work-image-effect-likephoto img{width:100%;}
.work-image-effect-likephoto:before,
.work-image-effect-likephoto:after{content:"";position:absolute;transform:rotate(-35deg);width:70px;height:25px;background:#fff;}
.work-image-effect-likephoto:before{top:-10px;left:-25px;border-bottom:1px solid #aaa;}
.work-image-effect-likephoto:after{bottom:-10px;right:-25px;border-top:1px solid #aaa;}

/*PC：画像にいろんなエフェクトを加えよう>画像をテキストで切り抜く*/
.work-image-effect-textimage{font-size:90px;padding:40px;font-weight: bold;color: rgba(0,0,0,0);background-image: url(../img/work-image-effect.jpg); background-position:bottom;-webkit-background-clip: text;}

/*PC：画像にいろんなエフェクトを加えよう>テキストにグラデーション*/
.work-image-effect-textgr{font-size:90px;text-align: center;background: -webkit-linear-gradient(left, #0066ff 0%,#ff33cc 100%);-webkit-text-fill-color: transparent;-webkit-background-clip: text;font-family: BIZ UDPGothic;font-weight: bold;}
}

上級編ワーク一覧

ワーク「Youtubeのアスペクト比率を一定にしよう！」

サンプル

HTML

CSS

ワーク「画像にいろんなエフェクトを加えよう」

サンプル(ドットシャドウ)

サンプル(ドットマスク)

サンプル(写真アルバム風)

サンプル(画像をテキストで切り抜く)

サンプル(テキストにグラデーション)

HTML

CSS

上級編 ワーク一覧

ワーク「Youtubeのアスペクト比率を一定にしよう！」

サンプル

HTML

CSS

ワーク「画像にいろんなエフェクトを加えよう」

サンプル(ドットシャドウ)

サンプル(ドットマスク)

サンプル(写真アルバム風)

サンプル(画像をテキストで切り抜く)

サンプル(テキストにグラデーション)

HTML

CSS

上級編ワーク一覧