分類: Design

CSS get an element use :nth-child() not :eq()

用 index 在重複元素中獲取一個元素

在 jQuery 是使用 :eq(2) ，雖然jQuery跟CSS選取器(selector)有很多相似之處，但還是有些差異，在CSS中要在重複元素中獲取一個元素是用偽類 :nth-child(2)

比如說我要指定定Apple 的樣式為紅色：

<div>
    <div id="bar1" class="foo">banana</div>
    <div id="bar2" class="foo">Apple</div>
    <div id="bar3" class="foo">Orange</div>
</div>

我們可以這麼做，都可以達到相同效果：

#bar2{
	color:red;
}
div.foo:nth-child(2){
	color:red;
}
.foo:nth-child(2){
	color:red;
}

同場加映

除了:nth-child()還有其他用在取得元素的偽類，都很常用到優

  • :first-child
  • :second-child
  • :third-child
  • :last-child
  • :nth-child

參考資料：

[……]

閱讀更多

Photoshop cc 2015 強大功能，一鍵改變人臉五官，輕鬆去背

本文出自：天天瘋後製
http://www.crazy-photoshop.com/17457.html

Adobe 出品的photoshop現在已經全民化了，但還是沒有停止他們進行，每過一段時間便會更新一些新功能，而這一次他們沒有更新PhotoshopCC這個名稱，而是改進了好幾項大功能，真得值擁有。每一項都減掉了不少人群的煩惱。此次更新，其中一個最注目的功能為「Face-Aware Liquify」（臉部感知液化），即是軟件可以先識別臉部五官，然後讓用戶可分別作相應的修改，例如眼睛大小、間距、額頭的闊窄、瘦臉、鼻高等，例如可以輕易調出微笑的嘴等。

Photoshop功能大更新 可以一鍵改變人臉五官

第一個值得推薦的一個功能，這真是的網紅的福音，這個功能可以識別照片中的人臉。
可以針對嘴巴，進行調整理，拍照時說笑得不好看，沒關係，後期一鍵讓你笑得開心，笑得自然，看下GIF圖。

Photoshop功能大更新 可以一鍵改變人臉五官

眼睛，你想大就大，有些人笑起來眼沒了，不要怕，歪了也可以擺正。

Photoshop功能大更新 可以一鍵改變人臉五官

臉形，臉形是很多影樓及寫真店都會微動的一項PS技能，以往都是用液化來實踐，對操作者有一定的要求，沒有2-3年經驗的很難進行把握，但下面這個你只要一鍵操作就行。

Photoshop功能大更新 可以一鍵改變人臉五官

鼻子自然也少不了。

Photoshop功能大更新 可以一鍵改變人臉五官

Adobe 出品的photoshop現在已經全民化了，但還是沒有停止他們進行，每過一段時間便會更新一些新功能，而這一次他們沒有更新PhotoshopCC這個名稱，而是改進了好幾項大功能，真得值擁有。每一項都減掉了不少人群的煩惱。此次更新，其中一個最注目的功能為「Face-Aware Liquify」（臉部感知液化），即是軟件可以先識別臉部五官，然後讓用戶可分別作相應的修改，例如眼睛大小、間距、額頭的闊窄、瘦臉、鼻高等，例如可以輕易調出微笑的嘴等。

Photoshop功能大更新 可以一鍵改變人臉五官

第三個功能，一鍵摳圖。先看下面這張圖，載很多人剛學習PS時，覺得最牛的可能就是把這類毛毛動物及透明物體摳出來，感覺好難。但如今只是一鍵，瞬間覺得我媽把我生我太早了，當年可花了我太多時間學摳圖（哭），還是看看視頻操作吧。

Photoshop功能大更新 可以一鍵改變人臉五官

當然還有我們之前有介紹過的Content Aware Crop，當你把照片拍歪掉時，使用本功能，可以將圖擺正且，可以自動幫你填補好空白部分。攝影師大愛。再也不用，先裁再去各種修補了。

Photoshop功能大更新 可以一鍵改變人臉五官

對於設計師，最苦惱的事也是最花時間的事可能就是找字體了，經常會碰到客戶要與XXX圖片上的字體一樣，你可能要花上半天的時間來找，當然現在也有個別網站可以上傳字體圖片進行識別，下面要說的就是PhotoshlpCC更新了這項讓設計師節省時間成本的利器。一起來了解下。

Photoshop功能大更新 可以一鍵改變人臉五官

 [……]

閱讀更多

CSS li float:center 實現li水平居中對齊

2020/03/12 更新
發現更簡單的方法，請參考這篇文章
https://vector.cool/css-ul-li-horizontal-align-center-only-css/
在切網頁版的時候，常常需要用到選單水平居中，雖然用<a>標籤很方便，在父容器下text-align center，就可達成上圖編排，但有時候HTML並不是由設計師自己開的，很多清單功能的在HTML上都會用<ul><li>方式呈現，例如頁碼，這是一個普遍慣用的作法，工程師一目了然。
但前端設計師套CSS時卻會遇到無法居中對齊問題，可以向左對齊，可以向右對齊，就是不能水平居中對齊，所以本篇提供一個解決方法，可以順利向上圖一樣，項目居中對齊。
HTML：
<div class="main-container">
    <div class="fixer-container">
        <ul class="list-of-floating-elements">
            <li class="floated">Floated element</li>
            <li class="floated">Floated element</li>
            <li class="floated">Floated element</li> 
        </ul>
    </div>
</div>

CSS：

<style>
ul li{
	float:left;
	margin:0 20px
}
.main-container {
	float:left;
	position:relative;
	left:50%;
}
.fixer-container {
	float:left;
	position:relative;
	left:-50%;
}
</style>

參考：

[……]

閱讀更多