Welcome to WebmasterServe!

FREE TO JOIN! Join us now to engage in informative and friendly discussions about Webmastering, SEO, SEM, Internet Marketing, Programming, Graphic Design, Online Jobs and more. What are you waiting for? Ready to join our friendly community? It takes just one minute to register.

Dismiss Notice

Join WebmasterServe Forums 
Join the discussion! Have a better idea or an opinion? It takes just one minute to register Click Here to Join

Tutorial 10 Css Tricks You Probably Overlooked

Discussion in 'CSS and CSS3 Coding Discussions' started by selvaa, Feb 23, 2016.

  1. selvaa

    Yellow Belt

    Dec 20, 2015
    +56 / -0
    10 CSS tricks you probably overlooked

    There are many CSS trick used by the web designers to achieve great results. I will be introducing 10 CSS tricks that are different and you may not know.

    1. Write vertically

    In CSS there are codes to the writing mode. You should always try to write vertically, it will useful while you display Chinese and Japanese. You can also use this to display text vertically to save the horizontal space like in table headers.

    2. Reuse Color value

    You can also reuse the color attribute value by adding the color attribute from the keywords currentcolor to the keyword. This way you can reuse the color to make the page look beautiful.

    3. Blend Backgrounds

    You can have as many as backgrounds you have. And also adding to it you can also blend the background using the keyword background-blend-mode. 16 blend modes are present at the moment totally. So if you are able to blend background it would be very helpful.

    4. Blend elements

    Like blending backgrounds you can also blend the contents by overlapping the elements using the mix-blend-mode. Firefox supports all but chrome doesn’t. You can mix an image and stack it with a graphical theme. This resulting element will be good.

    5. Ignore pointer events

    You can make any element as pointer by using the single attribute called pointer events. By giving this value as none it will make it point to nothing as there is not the target pointer element.

    6. Decorate split boxes

    when you try to split the boxes the edges of the boxes looks like they are sliced so you can try to decorate the split boxes by using the keyword or attribute box-decoration-break: clone. In IE it doesn't render the box decoration but will render the doc shadows. There is a horizontal padding and you may need to fill it with spaces.
    7. Collapse table elements

    There is an another attribute which is made for the rows and columns, the attribute is visibility:collapse. In this case the rows and columns are not kept empty the content from the other cell is being occupied.

    8. Create columns

    Using the columns attribute, you can always create a layout for the column. There are various attributes which is used for column like column-count which is used to specify the no. of columns and column-width to specify the width of the column to be rendered. If you are to use an image its width and column width should match

    9. Make elements resizable

    The CSS3 attribute resize will help in resizing the element vertically or horizontally or both. It is also used to disable the re-sizeabliity in the text area. With resize attribute the size of the element can be made as per the desire of the user.

    10. Create patterns

    The gradients which are present in CSS3 attribute can be piled up together to produce patterns. This supports in creating a nice background image rather than using some external image as background. But it is tough to implement it.

Share This Page