僅僅用CSS就可以實(shí)現(xiàn)這些？

原文鏈接為CSS can do that?，由Ananya Neogi在Dev社區(qū)所發(fā)表，本人進(jìn)行翻譯轉(zhuǎn)載。

本文列舉了一些僅用CSS就可以實(shí)現(xiàn)的非常棒的效果。

注意：本文中列出的一些屬性可能并不支持某些瀏覽器。這種情況下，我們可以使用@supports語(yǔ)法來(lái)檢查瀏覽器的支持情況，并使用相應(yīng)的自定義樣式來(lái)替代這些屬性。為了保證效果，請(qǐng)使用chrome瀏覽器查看以下示例??。

1. box-decoration-break

這個(gè)屬性定義了一個(gè)元素片段在跨行、跨列或跨頁(yè)時(shí)候的樣式渲染表現(xiàn)。

效果

在線預(yù)覽：【傳送門】

代碼

  • html
<h1><span>SHE SELLS SEASHELLS ON THE SEASHORE.
</span></h1>
  • css
h1 {
  max-width: 300px;
  font-family: Verdana;
}

h1 span {
  background: blue;
  color: white;
  padding: 12px 12px;
  line-height: 1.4;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Just for centering */
body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

2. attr()

表達(dá)式attr()用來(lái)獲取選擇到的元素的任一CSS屬性值。

效果

在線預(yù)覽：【傳送門】

代碼

  • html
<div> On saturdays, we 
<span aria-label="art - By art we mean painting and drawing">art!</span>
</div>
  • css
span {
  position: relative;
  color: blue;
  cursor: pointer;
}
span:hover:before {
    opacity: 1;
}

span:before {
  content: attr(aria-label);
  opacity: 0;
  position: absolute;
  top: 30px;
  right: -90px;
  font-size: 14px;
  width: 100px;
  padding: 10px;
  color: #fff;
  background-color: #555;
  border-radius: 3px;
  pointer-events: none;
}

div {
  padding: 40px;
  font-size: 20px;
  font-family: sans-serif;
}

3. backface-visibility

這個(gè)屬性指定當(dāng)元素背面朝向觀察者時(shí)是否可見(jiàn)。想象一下卡片翻轉(zhuǎn)的效果？

效果

在線預(yù)覽：【傳送門】

代碼

  • html
<div class="flip-card" tabIndex="0">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <h3>Hover, please!</h3>
    </div>
    <div class="flip-card-back">
      <h3>Whoaaa!!!</h3>
    </div>
  </div>
</div>
  • css
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.flip-card:focus {
    outline: 0;
}

.flip-card:hover .flip-card-inner,
.flip-card:focus .flip-card-inner{
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-front {
  background: linear-gradient(to left, #4364f7, #6fb1fc);
  color: black;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.flip-card-back {
  background: linear-gradient(to right, #4364f7, #6fb1fc);
  color: white;
  transform: rotateY(180deg);
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
h3 {
  font-size: 20px;
  font-family: Verdana, sans-serif;
  font-weight: bold;
  color: #fff;
}

4. conic-gradient

漸變是一種很棒的效果。你可能曾經(jīng)有過(guò)在背景上應(yīng)用linear-gradient（過(guò)線性漸變）的經(jīng)驗(yàn)，但是你知道嗎，通過(guò)conic-gradient（圓錐漸變）我們可以用純css來(lái)創(chuàng)建一張餅圖！

效果

在線預(yù)覽：【傳送門】

代碼

  • html
<div class="pie-chart"></div>
  • css
.pie-chart {
  width: 340px;
  height: 340px;
  background: conic-gradient(#8b22ff 0% 25%, #ffc33b 25% 56%, #21f3d6 56% 100%);
  border-radius: 50%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

想了解更多關(guān)于conic-gradients的效果，請(qǐng)參考MDN文檔。

5. filter

當(dāng)你擁有了CSS filter(濾鏡)，還需要使用photoshop的濾鏡效果嗎？
濾鏡主要是用來(lái)實(shí)現(xiàn)圖像的各種特效。我們可以實(shí)現(xiàn)的效果如下 - blur（模糊）, brightness（亮度）, contrast（對(duì)比度）, grayscale（灰度）, hue-rotate（色相旋轉(zhuǎn)）, opacity（透明度）, invert（反色）, sepia（褐色）, saturate（飽和度）, drop-shadow（陰影）。

效果

在線預(yù)覽：【傳送門】

代碼

  • html
<div>
  <h1>Original Image:</h1>
    <img src="https://images.unsplash.com/photo-1546948630-1149ea60dc86?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80">
</div>
<h1>Filtered Images: </h1>
<div class="filter1">
  <img src="https://images.unsplash.com/photo-1546948630-1149ea60dc86?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80">
</div>

<div class="filter2">
  <img src="https://images.unsplash.com/photo-1546948630-1149ea60dc86?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80">
</div>

<div class="filter3">
  <img src="https://images.unsplash.com/photo-1546948630-1149ea60dc86?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80">
</div>
  • css
img {
  width: 500px;
  margin-bottom: 20px;
}

.filter1 img {
  filter: grayscale(90%) sepia(13%) saturate(700%); 
}

.filter2 img {
  filter: hue-rotate(-40deg); 
}

.filter3 img {
  filter: contrast(170%) saturate(80%) blur(1px);
}

drop-shadow 濾鏡真的非常棒！通過(guò)它你可以給圖片增加陰影效果。

效果

在線預(yù)覽：【傳送門】

代碼

  • html
<img src="https://i.dlpng.com/static/png/261408_thumb.png" class="drop">
<img src="https://i.dlpng.com/static/png/261408_thumb.png" class="drop2">
  • css
.drop {
  width: 200px;
  filter: drop-shadow(10px 5px 1px pink);
}
.drop2 {
    width: 200px;
  filter: drop-shadow(0px 0px 5px magenta);
}

6. mix-blend-mode

這個(gè)屬性描述了元素的內(nèi)容應(yīng)該與元素的直系父元素的內(nèi)容和元素的背景如何混合。
令人感到驚喜的是，通過(guò)mix-blend-mode和filter，圖像和文本可以組合使用。更多請(qǐng)參考 MDN文檔。

效果

在線預(yù)覽：【傳送門】

代碼

  • html
<div>
  <h1 class="first">DREAM</h1>
  <h1 class="second">DREAM</h1>
  <h1 class="third">DREAM</h1>
</div>
  • css
.first {
  text-align: left;
  color: navajowhite;
  position: absolute;
  top: -1px;
  left: 8px;
}

.second {
  position: absolute;
  top: 3px;
  left: 7px;
  color: palevioletred;
  mix-blend-mode: darken;
}

.third {
  position: absolute;
  top: 6px;
  left: 3px;
  color: darkturquoise;
  mix-blend-mode: color-burn;
}

h1 {
  font-size: calc(4rem + 10vw);
  font-family: Verdana, serif;
  margin: 0;
}

div {
  position: relative;
}

7. first-letter

一本書或者雜志中我最喜歡的就是那漂亮的首字母下沉效果。我們通過(guò)first-letter偽元素來(lái)實(shí)現(xiàn)這種效果。

效果

在線預(yù)覽：【傳送門】

代碼

  • html
<p>Anec eu odio vitae ante consequat aliquet nec id nisl. Duis ut turpis a turpis facilisis sagittis. Phasellus iaculis, augue vitae rhoncus mattis, nulla libero tristique nulla, malesuada tempor augue dui nec diam. Nullam elementum ipsum ut nisi mollis dignissim eget quis orci.</p>

<p>Aenean faucibus ante id sapien scelerisque, ac ullamcorper tortor porttitor. Vivamus mauris nisl, ornare eget purus in, pulvinar pulvinar nisi. Suspendisse ut turpis pellentesque lorem varius commodo. Mauris mi tellus, iaculis vitae sapien ut, molestie fringilla nisi.</p>
  • css
@import url(https://fonts.googleapis.com/css?family=Sansita+One);
  
p {
  font-family: Georgia;
  font-size: calc(16px + 0.25vw);
  line-height: 1.6;
}

p:first-child:first-letter {
  font-size: calc(60px + 0.75vw);
  line-height: 40px;
  color: indianred;
  float: left;
  padding-top: 10px;
  padding-right: 10px;
  padding-left: 5px;
    font-family: Sansita One;
}

8. shape-outside

這個(gè)屬性允許我們讓相鄰的內(nèi)聯(lián)元素環(huán)繞著不規(guī)則形狀的形體而不是簡(jiǎn)單的矩形進(jìn)行排列。
我們可以在新窗口打開示例，然后改變窗口的大小，注意文本環(huán)繞著圖片的方式是怎樣變化的。

效果

在線預(yù)覽：【傳送門】

代碼

  • html
<img src="https://i.dlpng.com/static/png/261408_thumb.png"/>
<p>Aenean faucibus ante id sapien scelerisque...</p>
  • css
p {
    font-family: Georgia;
  font-size: calc(16px + 0.25vw);
  line-height: 1.6;
  text-align: left;
}
img {
  width: 200px;
  height: 500px
  shape-outside: url("https://i.dlpng.com/static/png/261408_thumb.png");
 float: right;
  margin: 10px;
}

body {
  max-width: 80%;
  margin: 0 auto;
}

9. writing-mode

這個(gè)屬性定義了文本在水平或垂直方向上如何排布。
我們可以使用這些值：
horizontal-tb：水平方向內(nèi)容從左往右，垂直方向自上而下的書寫方式（水平布局）.
vertical-lr：垂直方向內(nèi)容自上而下，水平方向從左到右的書寫方式（垂直布局）。
vertical-rl：垂直方向內(nèi)容自上而下，水平方向自右而左的書寫方式（垂直布局）。

效果

查看這個(gè)示例
以查看它的實(shí)際效果。

10. 給文本添加漸變效果

這需要結(jié)合-webkit-background-clip: text 和 -webkit-text-fill-color: transparent這兩個(gè)CSS屬性來(lái)實(shí)現(xiàn)。

效果

在線預(yù)覽：【傳送門】

代碼

  • html
<blockquote class="decoration">You can't use up creativity. </br>The more you use, the more you have.
  <cite> &mdash; Maya Angelou</cite>
</blockquote>
  • css
blockquote {
  font-size: 28px;
  font-weight: bold;
  font-family: Georgia, serif;
  background: linear-gradient(to right, #4364f7, #6fb1fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
  max-width: 70vw;
}

cite {
  font-size: 20px;
  font-weight: bold;
  background: linear-gradient(to right, #4364f7, #23d5ab);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
  display: block;
  text-align: right;
  margin-top: 20px;
}

11. 平滑滾動(dòng)捕捉點(diǎn)

scroll-snap-type屬性設(shè)置網(wǎng)頁(yè)容器滾動(dòng)停止的時(shí)候，捕捉點(diǎn)如何執(zhí)行。

此示例指定了垂直（y軸）滾動(dòng)的值為mandatory。MDN文檔
上詳細(xì)說(shuō)明了其它值，如水平（x軸）滾動(dòng)和proximity等。

效果

在線預(yù)覽：【傳送門】

代碼

  • html
<div class="wrapper y-scroll-snap">
  <div>Spread</div>
  <div>Love</div>
  <div>Not</div>
  <div>Hate</div>
</div>
  • css
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.wrapper {
  display: flex;
  overflow: auto;
  flex: none;
  width: 80vw;
  height: 80vh;
  flex-flow: column nowrap;
}

.y-scroll-snap {
    scroll-snap-type: y mandatory;

}

.wrapper > div {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
   line-height: 3;
  font-size: 128px;
  width: 100%;
  height: 100%;
}

.wrapper > div:nth-child(even) {
  background-color: lightsalmon;
}

.wrapper > div:nth-child(odd) {
  background-color: lightpink;
}

這里僅僅展示了一部分css可以做的事情。
CSS擁有著無(wú)限的可能性！

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案？ 參考答案 (1)瀏覽器兼容問(wèn)題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,194評(píng)論 1贊 92
  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁(yè)的形式展示給用戶的，因此網(wǎng)頁(yè)是網(wǎng)絡(luò)信息傳遞的載體。網(wǎng)頁(yè)文件是用...
    阿啊阿吖丁閱讀 4,982評(píng)論 0贊 0
  • 選擇qi：是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性： color，font，text－align，li...
    love2013閱讀 2,460評(píng)論 0贊 11
  • CSS 指層疊樣式表（Cascading Style Sheets），是一種用來(lái)為結(jié)構(gòu)化文檔（如 HTML 文檔或...
    神齊閱讀 2,235評(píng)論 0贊 14
  • 本文主要是起筆記的作用，內(nèi)容來(lái)自慕課網(wǎng). 認(rèn)識(shí)CSS樣式 CSS全稱為“層疊樣式表 (Cascading Styl...
    0o凍僵的企鵝o0閱讀 2,752評(píng)論 0贊 30

友情鏈接更多精彩內(nèi)容