整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
式：PSD
數量：116款
文件大小：4.36
下載地址請查看文章底部
獲取鏈接：
http://www.zaotushi.com/archives/27286.html
源：量子位
本文約2509字，建議閱讀4分鐘。
本文介紹資深前端用HTML+CSS繪畫，全程不用PS、AI這種圖形化的圖片編輯器，單純敲一行行代碼純手工繪制。
HTML不是編程語言，但這并不妨礙精通它的大佬玩出花來。
普通的前端，用HTML+CSS制作網頁，元素簡單，工具豐富。
大佬級前端，用HTML+CSS繪畫，全程不用PS、AI這種圖形化的圖片編輯器，單純敲一行行代碼純手工繪制。
把代碼轉換之后，就變成了鮮嫩的水果：
或者畫出洛可可風格的古典女性肖像：
還有弗拉芒巴洛克肖像風格的人物畫像，充滿了中世紀的禁欲感：
現代的也有，比如這位在粉色燈光下的著禮服的妹子：
以及充滿者50年代氣息的復古風人物海報：
曲線、光影、漸變，每個元素都相當復雜。
而且，創作過程中不用SVG，只用Atom文本編輯器和Chrome開發者工具。
也就是說，畫面上的每一條曲線和漸變、每一處高光和陰影、每一根頭發和睫毛、每一片蕾絲和褶皺，都是一行行代碼從頭敲出來的！
如此精細程度和創造力，讓學美術的網友感嘆“學畫畫不如寫代碼”，讓學計算機的同學覺得“別人寫的這么藝術，一定是我的教科書打開方式不對”。
真·交叉學科大佬。
這個項目也一度登上了GitHub Trending排行榜第二名：
并且Issues里都是諸多用戶的膜拜：厲害！崇拜！太棒了！
它們的作者，是灣區前端大神Diana Smith小姐姐，她目前是企業及軟件開發商Atlassian的一名資深Web開發。
Diana在專門討論CSS的網站CSS-Tricks寫下了詳細的教程。
畫出這樣一個圖形分成幾步？
如果不用CSS，一般都是直接嵌入這個特殊的圖形。
如果用CSS，那么就從黑色矩形開始，然后在兩側加上上兩個
與白色背景顏色匹配的邊框半徑元素。
先畫出一個黑色矩形，然后兩邊用圓弧遮擋。有了基礎形狀后，下一步就是給它添上漸變的背景。但是如果用矩形方式填充，得到的效果就是這樣的：
Diana的辦法是：在保留矩形的同時，加上兩個彎曲的div，把凹進去的部分也填充上。
最后完整的代碼是這樣的：
div{
width: 500px;
height: 350px;
background: #000;
position: relative;
&::after, &::before{
width: 20%;
height: 100%;
position: absolute;
top: 0;
z-index:2;
content: "";
background: #1e5799;
background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%);
background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%);
background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
}
&::after{
border-radius: 100% 0% 0% 100%;
right: 0;
}
&::before{
border-radius: 0 100% 100% 0;
left: 0;
}
}
body{
background: #1e5799;
background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%);
background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%);
background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
}你也可以去這個完成查看CSS樣式的實際運行效果：
https://codepen.io/jean-jordan/pen/KeKaBw
剛剛我們畫的那幅畫像不像人的脖子？好的，我們再回到人像畫上，Diana繪制人物的脖子也是類似的過程。
在上面這張圖里，我們看到了Diana如何逐步改形狀，最終得到了油畫中人物的脖子。
但是僅僅會畫各種幾何形狀，是無法生成藝術品的，Diana總結了她在繪圖中的5個重要CSS屬性。
1、邊界半徑（border-radius）
邊界半徑是為了讓矩形的邊角過渡得更自然，對于大多數網頁開發者來說，只需一個參數border-radius，可以設定不同的半徑數值。
border-radius: 15px 10px 40px 30px / 40px 10px 15px 30px;2、盒子陰影（box-shadow）
對多個盒子陰影進行分層是增加深度的最佳方法之一。框陰影將粘附到html容器的邊緣，也會沿著邊界半徑定義的邊緣。
box-shadow: 6px -11px 20px 1px red, -15px -15px 5px -10px blue, inset 5px 5px 35px 10px green;開發者可以指定模糊半徑，以及陰影是向內延伸還是向外延伸。
3、變形（transform）
變形的主要方式有：旋轉（rotate）、縮放（scale）和傾斜（skew）
transform: rotate(-45deg)
transform: scale(0.7, 1.3)
transform: skew(25deg, 30deg);此外還有透視，讓物體產生遠小近大的視覺效果，或者是僅僅為畫出一個梯形。
transform: perspective(10px) rotateY(5deg);4、線性梯度（linear-gradient）和徑向梯度（radial-gradient）
線性梯度用于定義一個方向上的漸變效果，徑向梯度用于定義圓和橢圓形的漸變效果
background-image: linear-gradient(0deg, blue, transparent 60%),
radial-gradient(circle at 70% 30%, purple, transparent 40%);5、層疊（overflow）
層疊是一種將大量雜亂元素填充到一個整齊的包中的方法，可以創建一些有趣的形狀。在變形那部分的基礎上使用hidden參數，可以把邊緣遮蓋起來。
overflow: hidden;以上5種元素缺一不可，隨便少一種都會產生怪異的效果。
不過即使這樣，也很有抽象藝術的美感，仿佛在看畢加索的作品。
不過，由于這是一個純個人藝術創作，Diana小姐姐并不關心瀏覽器適配性。
因此，這些代碼在Chrome里可以完美展現，但如果用其他瀏覽器打開，可能就會出現不一樣的效果。
比如，MAC上的Safari瀏覽器打開，妹子的眼睛就方了：
肩膀上的高光，變成了一個大圈圈：
胸前的禮服上，也被潑了一道墨：
如果用早期的Chrome打開，會出現驚悚的頭身分離的效果：
早期的Opera瀏覽器，打開之后臉方了：
Windows 7上從IE 6到IE 11，顯示出來的都是這個鬼樣子：
濃重的線條，甚至有點抽象藝術的感覺。
同樣是早期IE，放到Mac上也一樣鬼畜，這是IE 5.1.7的效果：
還有人試了試，在Windows 98系統的IE 7瀏覽器打開，會變成非常像素風的樣子：
最恐怖的是三星手機上的夜間模式打開：
連人種都變了啊！
其他的幾張畫，換個瀏覽器打開也比較鬼畜。
妹子你bra里的鋼圈出來了啊！
拉夫領變得透明而有光澤，領口的蕾絲干脆斷掉了，仿佛是逃難時期的肖像畫。
最后，如果你在iPhone上裝了Chrome，出來的也是Safari的效果，想看完整效果的話，請在安卓手機或者電腦的Chrome上打開。
因此，有不少網友都覺得，這幾幅畫可以當成瀏覽器測試項目，一試就能知道內核用的是誰家的。
CSS太難，學不會？不要緊，雖然我們不能把代碼變成圖片，但是可以把圖片變成代碼啊。
沒錯，就是ASCII藝術，早在DOS時期，就有人用命令行界面來顯示圖片。直到今天已成為一種流行的互聯網文化。
用單色字符來畫出世界名畫已經不算新鮮事。最近又有個碼農開發了一個新的項目Primg，讓任何一幅畫都可以用質數來表示。
比如蒙拉麗莎，就可以用一個3萬位的質數二進制方式繪制出來。
作者的GitHub：
https://github.com/cyanharlow
作者博客主頁：
https://diana-adrianne.com/
教程：
https://css-tricks.com/solving-lifes-problems-with-css/
用質數生成任意ASCII藝術：
https://github.com/geonnave/primg
—完—
關注清華-青島數據科學研究院官方微信公眾平臺“ THU數據派 ”及姊妹號“ 數據派THU ”獲取更多講座福利及優質內容。
索 HTML 圖像的不同概念，以及如何有效地使用它們在您的網站上增加視覺吸引力、傳達信息和表達情感。 本指南包含大量示例和實用技巧，可幫助您創建一個視覺效果驚人且用戶友好的網站。
圖像是網頁設計師和開發人員的強大工具，它們可用于傳達信息、表達情感并使網站更具視覺吸引力。 HTML 圖像概念是網頁設計和開發的重要方面。 它們用于將圖像嵌入到網頁中，以便于顯示和共享圖片和圖形。 在這篇博文中，我們將探討 HTML 圖像的不同概念以及如何有效地使用它們。
首先，讓我們談談不同類型的 HTML 圖像。 有兩種主要類型的圖像：內嵌圖像和背景圖像。 內聯圖像直接嵌入到 HTML 代碼中，而背景圖像則應用于元素的背景。
在此示例中，內聯圖像“image.jpg”直接嵌入到 HTML 代碼中并顯示給用戶。
在此示例中，背景圖像“image.jpg”應用于 div 元素的背景并顯示給用戶。
以合乎邏輯且一致的方式使用圖像也很重要。 這意味著您應該使用它們來傳達與網頁內容相關的信息或表達情感，而不是隨意使用它們。 此外，使用 alt 屬性為圖像添加文本替代也很重要，它允許可能使用屏幕閱讀器的用戶訪問圖像，或者以防圖像加載失敗。
在此示例中，替代文本“日落的美麗圖像”讓用戶清楚地了解圖像所代表的內容。
另一個 HTML 圖像概念是使用寬度和高度屬性調整圖像大小的能力。 這些屬性允許您調整圖像大小以適合您的布局和設計。
在此示例中，圖像的寬度設置為 300 像素，圖像的高度設置為 200 像素。
HTML 圖像概念是網頁設計和開發的重要方面。 它們用于將圖像嵌入到網頁中，以便于顯示和共享圖片和圖形。 通過了解不同類型的圖像并正確使用它們，您可以為您的網站增加額外的視覺吸引力，并以有力的方式傳達信息或表達情感。 無論是使用內聯圖片還是背景圖片，添加替代文本或調整大小，這些概念都是創建視覺效果驚人且用戶友好的網站的關鍵。
但不要只相信我們的話，您自己試試吧！ 嘗試使用 HTML 圖像，看看它們如何增強您網站的整體外觀。 通過每一行代碼，您離創建一個您的訪問者會喜歡的美觀且引人入勝的網站又近了一步。 請記住，圖像具有喚起情感和傳達信息的力量，因此請明智地使用它們并將它們作為您網頁設計策略的重要組成部分。 通過正確組合 HTML 和圖像，您將創建一個脫穎而出并給訪問者留下持久印象的網站。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
