Guest User

Untitled

a guest
Aug 28th, 2016
61
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 0.83 KB | None | 0 0
  1. # 3 hidden CSS tips
  2.  
  3. **1\. Use empty-cells to style table empty cells:**
  4.  
  5. Surprisingly the browser support is quite good and extends back to IE8.
  6. Convenient to give less visual predominance to empty cells.
  7. ```css
  8. table {
  9. empty-cells: hide;
  10. }
  11. ```
  12.  
  13. **2\. border-radius can be made non-symmetric:**
  14.  
  15. In short you can define the horizontal and vertical radius independently.
  16. This gives room for interesting shapes. The left part of the slash is the horizontal radius, the right part is the vertical radius.
  17. ```css
  18. .custom-round {
  19. border-radius: 15px 15px 15px 10px / 5px 5px 20px 5px;
  20. }
  21. ```
  22.  
  23. **3\. Use pseudo-elements to style the first letter and line:**
  24.  
  25. No need to resort to another element to wrap the first letter or line of a `<p>` to style them differently:
  26. ```css
  27. p::first-letter {
  28. font-size: 2rem;
  29. }
  30.  
  31. p::first-line {
  32. font-weight: 600;
  33. }
  34. ```
Add Comment
Please, Sign In to add comment