รวม CSS 3 CSS ที่ใช้ใน responsive website ที่อาจไม่ค่อยได้เห็นเท่าไร


By : progresspr_o | Date : 2015-06-23 14:03 | View : 1698

***เดี๋ยวมาเขียนอธิบายเพิ่มทีหลังนะครับ

.top-grid:nth-child(2) {
  display:none;
}


body a{
transition: 0.5s all;
-webkit-transition: 0.5s all;
-o-transition: 0.5s all;
-moz-transition: 0.5s all;
-ms-transition: 0.5s all;
}

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

 -webkit-tap-highlight-color: rgba(0,0,0,0);

text-shadow:0px 1px 3px #333;

box-shadow:0px 1px 3px #333;

display:inline-block;
display: -webkit-inline-box;
display: -moz-inline-box;
display: -o-inline-box;
display: -ms-inline-box;

content:"";

border-radius:10px 10px 0 0;

-webkit-transform:rotate(-55deg);
-moz-transform:rotate(-55deg);
-ms-transform:rotate(-55deg);
-o-transform:rotate(-55deg);
transform:rotate(-55deg);
-webkit-transition:0.6s;
-moz-transition:0.6s;
-o-transition:0.6s;
transition:0.6s;

.rslides li:first-child {
.rslides li:last-child {

background: #fefefe; /* Old browsers */
background: -moz-linear-gradient(top,  #fefefe 0%, #f7f7f7 48%, #f7f7f7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefefe), color-stop(48%,#f7f7f7), color-stop(100%,#f7f7f7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #fefefe 0%,#f7f7f7 48%,#f7f7f7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #fefefe 0%,#f7f7f7 48%,#f7f7f7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #fefefe 0%,#f7f7f7 48%,#f7f7f7 100%); /* IE10+ */
background: linear-gradient(to bottom,  #fefefe 0%,#f7f7f7 48%,#f7f7f7 100%); /* W3C */
 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#f7f7f7',GradientType=0 ); /* IE6-9 */

nth-child ใช้ยังไง


:nth-child นี้จะสามารถใช้ใน element อะไรที่นับได้ เช่น unordered lists (ul) หรือ ordered lists (ol) โดยใช้เป็น selector ที่ชี้ไปยัง (list) li (หมายเหตุ: จะใช้กับ element อื่นๆก็ได้นะครับ แต่ส่วนตัวผมไม่ค่อยได้ใช้เท่าไหร่)
ตัวอย่างเช่น
 
 
 
ul li:nth-child(3n+3) {
 
color: #00ff00;
 
}
 
 
 
 
 
 
ซึ่งโค้ดนี้จะ select ตัวที่อยู่ใน unordered lists ตัวที่ 3, 6, 9, 12 ให้มีตัวอักษรเป็นสีเขียว
ว่าแต่โค้ดนั้นมีการทำงานอย่างไร?
 
 
 
เราต้องมาทำความเข้าใจกับ n และ algebraic equation กันครับ
ค่า n จะเริ่มต้นที่ 0 และเซทกับค่าที่เป็น integer จำนวนเต็มบวก ก็จะได้ 3xn ซึ่งก็จะได้เป็น (3xn)+3 เราจะได้
 
(3 x 0) + 3 = 3 คือ element ตัวที่ 3
(3 x 1) + 3 = 6 คือ element ตัวที่ 6
(3 x 2) + 3 = 9 คือ element ตัวที่ 9
ไปเรื่อยๆ
 
แล้วถ้า :nth-child(2n+1) ล่ะ?
เราก็จะได้
 
(2 x 0) + 1 = 1 คือ element ตัวที่ 1
(2 x 1) + 1 = 3 คือ element ตัวที่ 3
(2 x 2) + 1 = 5 คือ element ตัวที่ 5
ไปเรื่อยๆ
 
แล้วถ้าเราอยาก select ตัวที่อยู่ในลิสที่เป็นเลขคี่ล่ะ เราจะทำยังไงกันล่ะครับพี่น้องงงงง?!
เรารู้ว่าตัวแรกของเลขคี่คือ 1 เราก็เอา +1 มาตั้งไว้ แล้วเราจะตัวไหนมาคูณกับ n กันล่ะ?! (เสียงแบบในรายการทีวีแชมป์เปี้ยน)
เรามาลอง 3 ดีไหม?
ลอง :nth-child(2n+1) ไหม?
 
(2 x 0) + 1 = 1 คือ element ตัวที่ 1
(2 x 1) + 1 = 3 คือ element ตัวที่ 3
(2 x 2) + 1 = 5 คือ element ตัวที่ 5
(2 x 3) + 1 = 7 คือ element ตัวที่ 7
 
อุ๊ยยย ได้แล้ววว เย้!! 55555
แต่มีวิธีที่ง่ายกว่านั้นครับ
ก็คือ ถ้าเป็นตำแหน่งเลขคี่ก็
 
:nth-child(odd)
 
หรือถ้าเป็นตำแหน่งตัวเลขคู่ก็
 
:nth-child(even)
 
ได้เลย โอ้โหหหหห!! ง่ายขนาดนั้นเชียววว! 55555
ถ้าอยากได้ตัวสุดท้ายก็
 
:last-child
 
หรืออยากได้ตัวก่อนสุดท้ายก็
 
:nth-last-child(2)
 
หรือตัวแรกก็
 
:first-child
 
แล้วถ้าเราจะเอาค่าที่เรามา +3 +1 กันเนี่ย ให้มัน ลบ แทนได้ไหม?
ดะดะดะดะดะ ได้สิค๊าบบบบบ!!
ลองกันเลย
 
:nth-child(3n-1)
 
(3 x 0) – 1 = -1 อ้าวว ไม่ match อะไรเลยนะฮ๊าฟฟฟฟ
(3 x 1) – 1 = 2 คือ element ตัวที่ 2
(3 x 2) – 1 = 5 คือ element ตัวที่ 5
(3 x 3) – 1 = 8 คือ element ตัวที่ 8
ก็จะเป็นแบบนี้ไปเรื่อยๆครับ
 
แล้วจำเป็นไหมต้องเป็นแบบนี้ (3n+1) อะไรทำนองนั้น แล้วถ้าเราอยากจะ (3n) เฉยๆจะได้ไหม?
ก็ได้เช่นกันครับ จะได้เป็นออกมาเป็นอย่างนี้ครับ
 
3 x 0 = 0 ไม่ match ครับ
3 x 1 = 3 คือ element ตัวที่ 3
3 x 2 = 6 คือ element ตัวที่ 6
3 x 3 = 9 คือ element ตัวที่ 9
 
แล้วถ้าอยากจะเอามาเป็นเต็มลบจะได้ไหม?
มันก็ได้นะครับ แต่เล่นท่าประหลาดแบบนี้ก็ไม่ค่อยแนะนำเท่าไหร่ ลองดู -n+3 ไหม?
 
-0 + 3 = 3
-1 + 3 = 2
-2 + 3 = 1
-3 + 3 = 0 ตั้งแต่นี้ไปมันก็ไม่ match กับอะไรแล้วครับ
 
แล้วถ้าเราอยากจะเลือกเฉพาะเจาะจงที่ตัวนั้นตัวเดียวไปเลยทำได้ไหมคะ?
ได้สิครับ ก็จัดแบบนี้ไปเลย
 
:nth-child(7)
ก็คือ select ไปที่ตัวที่ 7 ตัวเดียวไปเลย
 

 

ที่มา http://hassadee.com/2013/06/07/how-to-use-nth-child-and-how-it-work/

 



แสดงความคิดเห็น