Useful CSS Tricks: 5 CSS Tricks

In day-to-day work life for a frontend developer, one comes across scenarios where you get to use the same styling in order to style a particular element. In this article, here are the first 5 of the CSS tricks I regularly use in my day-to-day work:

1. Limiting text display with an ellipsis:

There are a lot of cases I come across where an element has a fixed width but its text content overflows and then overlaps the other adjacent elements, so here is a generic style class that I use on the element to prevent the text from overflowing.

CSS trick for handling overflowing text with an ellipsis

In order to make the above styling work, the element needs to have a fixed width. I usually use separate style classes to apply width in order to keep the style classes as generic as possible.

2. Making an element center-aligned inside a block (horizontally & vertically)

The easiest way to center-align text, an image, or any other element within a block is by using just a couple of flexbox properties. The style class needs to be applied to the block element and the content inside it will automatically be centrally aligned.

CSS trick for center align content inside a block element

Please note that the element which uses this class needs to have some height (or min-height) and only then it can be seen that the inside content aligns itself vertically in the middle of the block.

3. Break text in a new line

During the testing phase of the UI, sometimes the layout needs to be tested with longer text which has no spaces and is full of special characters, which might not be a realistic scenario but the UI should still be able to handle it smoothly.

#ui #web-development #css #useful-tips #tricks

What is GEEK

Buddha Community

Useful CSS Tricks: 5 CSS Tricks

Useful CSS Tricks: 5 CSS Tricks

In day-to-day work life for a frontend developer, one comes across scenarios where you get to use the same styling in order to style a particular element. In this article, here are the first 5 of the CSS tricks I regularly use in my day-to-day work:

1. Limiting text display with an ellipsis:

There are a lot of cases I come across where an element has a fixed width but its text content overflows and then overlaps the other adjacent elements, so here is a generic style class that I use on the element to prevent the text from overflowing.

CSS trick for handling overflowing text with an ellipsis

In order to make the above styling work, the element needs to have a fixed width. I usually use separate style classes to apply width in order to keep the style classes as generic as possible.

2. Making an element center-aligned inside a block (horizontally & vertically)

The easiest way to center-align text, an image, or any other element within a block is by using just a couple of flexbox properties. The style class needs to be applied to the block element and the content inside it will automatically be centrally aligned.

CSS trick for center align content inside a block element

Please note that the element which uses this class needs to have some height (or min-height) and only then it can be seen that the inside content aligns itself vertically in the middle of the block.

3. Break text in a new line

During the testing phase of the UI, sometimes the layout needs to be tested with longer text which has no spaces and is full of special characters, which might not be a realistic scenario but the UI should still be able to handle it smoothly.

#ui #web-development #css #useful-tips #tricks

anita maity

anita maity

1618667723

Sidebar Menu Using Only HTML and CSS | Side Navigation Bar

how to create a Sidebar Menu using HTML and CSS only. Previously I have shared a Responsive Navigation Menu Bar using HTML & CSS only, now it’s time to create a Side Navigation Menu Bar that slides from the left or right side.

Demo

#sidebar menu using html css #side navigation menu html css #css side navigation menu bar #,pure css sidebar menu #side menu bar html css #side menu bar using html css

Ray  Patel

Ray Patel

1619518440

top 30 Python Tips and Tricks for Beginners

Welcome to my Blog , In this article, you are going to learn the top 10 python tips and tricks.

1) swap two numbers.

2) Reversing a string in Python.

3) Create a single string from all the elements in list.

4) Chaining Of Comparison Operators.

5) Print The File Path Of Imported Modules.

6) Return Multiple Values From Functions.

7) Find The Most Frequent Value In A List.

8) Check The Memory Usage Of An Object.

#python #python hacks tricks #python learning tips #python programming tricks #python tips #python tips and tricks #python tips and tricks advanced #python tips and tricks for beginners #python tips tricks and techniques #python tutorial #tips and tricks in python #tips to learn python #top 30 python tips and tricks for beginners

Top 8 CSS Tricks You’ve Never Used Before.

Strictly abiding by my ‘no-fluff’ doctrine, let’s just dive right in:

  • 1. Class Contains
  • 2. Class Contains (Case-Sensitive)
  • 3. Check If Class Is Present
  • 4. Links that start with HTTPS & End in .Org
  • 5. Elements With Certain Language Attribute
  • 6. Select Images With No Alt Attributes
  • 7. General Siblings
  • 8. Adjacent Sibling

#programming #css #coding #tricks #css tricks

Hire CSS Developer

Want to develop a website or re-design using CSS Development?

We build a website and we implemented CSS successfully if you are planning to Hire CSS Developer from HourlyDeveloper.io, We can fill your Page with creative colors and attractive Designs. We provide services in Web Designing, Website Redesigning and etc.

For more details…!!
Consult with our experts:- https://bit.ly/3hUdppS

#hire css developer #css development company #css development services #css development #css developer #css