CSS SHAPES

A width-responsive perfect square in pure CSS

The resize property — I wasn’t aware you could actually control this past textareas, but stumbled upon it when looking for a way to make a user-resizable div without using JavaScript.

How the square is made

#square  width: 100%; padding-bottom: 100%; position: relative; background-color: #2980b9; > 

• width: 100% is to make sure it’s defined as having the same width as its outer, resizable container.
• padding-bottom: 100% is based on a trick in the CSS spec. When specifying a margin or padding by percentage, it’s always based on the width, even if it’s a -top or -bottom property. In this way we get a property that’s equal to the width.
• position: relative is so that I can put stuff inside it without disrupting the padding; any additional content would add content to the box, which would make it a rectangle
• background-color is there so you can see where it is ¯\_(ツ)_/¯

How the circle is made

Once you have any square, making a circle is easy enough. The only trick you really need is border-radius: 50% , but let’s break down the responsive circle a bit more.

#circle  position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; border-width: 4px; border-color: #27ae60; border-style: solid; border-radius: 50%; > 

• position: absolute makes sure that this circle stays within the position: relative square while not adding any in-flow content to it.
• top: 0; bottom: 0; width: 100%; height: 100%; constrains the circle to the exact dimensions of the responsive square. At this point, what we have is a position: absolute container that is an inner copy of our square.
• The border-* properties are used to build the outline of the circle. We have a 4px green solid border, and it has a radius of half the edge of the square.

Quick geometry recap

Here’s an illustration of why 50% is the magic number to make a circle from a square:

The radius of the circle is equal to half the side of the square.

Источник

CSS Shapes With Text Inside

In this tutorial we will show you the solution of CSS shapes with text inside, as we know css used to style html elements, here we used internal style method to show demo.

We can create any shape in html and css here we will make square and triangle shape with respective shape name on it.

Here we used border style to create triangle shape and square we can make easily with just ‘width and height’ style property but we don’t have inbuilt method to make any shapes in html.

Step By Step Guide On CSS Shapes With Text Inside :-

We can implement styles using three types (i.e inline,external or internal) Internal means we have to define our style within tag in head block and inline means we have use style within element definition, external means we defined our css at separate file with .css extension we have to import by tag within head block.

In our program we defined two tags with attributes of classes with value ‘tri,sqaure’ and within that we defined two para

tag with attribute classes of ‘t,sq’ and texts.

Using them we defined some block of styles with property ‘border-bottom’ value ‘100px solid #555’ none of them we needs to make left and right side border to be ‘transparent’ then only we can get triangle shape and for square shape we just define width and height of div to be equal size that’s all.

    .tri < width: 0; height: 0; border-left: 65px solid transparent; border-right: 65px solid transparent; border-bottom: 100px solid #555; >.square < width: 50px; height: 50px; background-color: green; position: absolute; margin-left: 20%; >.sq < text-align: center; >.t 
Triangle
 
Square
  

1. tag which is instruct the web browser about what version of HTML file written in.
2. The tag is used to indicate the beginning of HTML document.
3. As above shown tag is containing information about webpage and if you need any external file those links are declared here. tag is used for set the webpage title.
4. Within tag we defined block of styles. We created triangle shape by styles ‘width and height’ value to ‘0’, right and left side border to ‘65px thickness, solid border style,color to be transparent’ and bottom of border to be ‘100px width, solid border style, grey color’.
5. Finally we gets triangle shape. Using class ‘t’ we can display text on triangle shape and for that we defined styles of ‘position:absolute’ makes text to be sticks on shape, for align that text to center of shape we defined ‘margin-top: 40px; and margin-left: -22px;’.
6. For creates square shape we used class ‘.square’ within that we defined width and height to be same size so it’s ‘50px’, ‘position:absolute’ is must because without this empty div will show up on display. When we fills them with text so it will show up but it is not properly make shape because lack of text width.
7. After that we sets ‘background-color’ to ‘green’ and ‘margin-left’ property to ‘20%’ makes available square shape after particular space.
8. In class ‘.sq’ we defined ‘text-align’ property to value ‘center’ so we can move text to the center area of shape.
9. Both and tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
10. tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
11. Here two tags we defined with some classes ‘tri,square’ and also we puts ‘triangle,square’ texts on between tag then its styled by as we seen at point 4.
12. Both , tags closed respectively. tag indicates the end of body, Then tag indicates the end of HTML document.

Conclusion :-

In conclusion we are able to know how to make shapes with text on that in css.

When we load our program we can see triangle with grey background color and square shape with green color background with respective shape texts on that and also we can make any size triangle and square with any background color.

This concept will useful when we needs to design our website or make any animations we needs to know aware of this and we can also make any shapes using css later will see about them.

I hope this tutorial on CSS shapes with text inside helps you and the steps and method mentioned above are easy to follow and implement.

Источник

How to Create a Responsive Square with CSS

During a recent project I came upon an interesting CSS problem. I needed to create a square element that would maintain its square shape as it responsively resized to a changing window size.

The Problem

It is easy to create a square when we can explicitly declare its ‘width’ and ‘height’ :

However, when we try to make our square element responsive by changing our units to percentages, we run into a problem:

The element’s width is calculated as a percentage of its parent’s width, while its height is calculated as a percentage of its parent’s height. Because our width and height are calculated from different measurements, the square will no longer hold its shape.

The Solution

After quite a bit of searching, I came upon a surprising solution to the problem. By making use of the :after pseudo-element and ‘padding-bottom’ , we can create our responsive square using only CSS.

The solution relies on the somewhat counterintuitive fact that padding is calculated as a percentage of its parent element’s width, not height. This rule applies, even for ‘padding-top’ and ‘padding-bottom’ , despite being vertical measurements.

To capitalize on this fact, we must first remove the ‘height’ property from our .square element. In its place, we add an empty :after element to .square and set ‘padding-bottom: 100%’ :

Because the pseudo element’s padding is calculated as a percentage of its parent’s width, and its parent is our .square element, we are effectively fixing the height of the pseudo-element to the width of .square . Whenever .square ’s width changes, so will the pseudo-element’s height.

Adding Content

Finally, we might like to add some content to our .square element. The above solution relies on both .square and .square:after having a height of 0, so adding content to either of them would break our solution.

Fortunately, this problem is easily solved by creating an absolutely positioned element and placing it within .square . The new element can be sized to match the square, but since it is absolutely positioned, its content will not affect the dimensions of our square:

.square < position: relative; width: 50%; >.square:after < content: ""; display: block; padding-bottom: 100%; >.content

Источник

Responsive CSS Squares and Rectangles (Simple Examples)

Welcome to a tutorial on how to create responsive CSS squares and rectangles. It is easy to create a fixed dimension shape with HTML and CSS, but when it comes to the responsive ones, they are really not that straightforward… Or is it?

• An easy way to create a responsive rectangle in CSS is to define the width and height using relative units – Viewport width vw , viewport height vh , and percentage % .
  • For squares, just make sure that the width and height are equal

    That covers the basics, but let us walk through a few more examples – Read on!

    ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

    TLDR – QUICK SLIDES

    

    TABLE OF CONTENTS

    DOWNLOAD & NOTES

    Firstly, here is the download link to the example code as promised.

    QUICK NOTES

    If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

    EXAMPLE CODE DOWNLOAD

    Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

    RESPONSIVE SQUARES & RECTANGLES

    All right, let us now go through the examples of responsive squares & rectangles.

    1) SQUARES & RECTANGLES USING RELATIVE UNITS

    HTML & CSS

    THE RESULT

    Go ahead, resize the window to see the shapes resize themselves.

    THE EXPLANATION

    • vw is relative to the viewport width, and vh is relative to the viewport height.
    • When we define width: 40vw and height: 15vh , the container has a size of 40% viewport width, 15% viewport height; It does not matter how the user resizes the screen, it will always maintain this ratio.
    • To create squares, we just have to make sure that the width and height are the same.

    2) ASPECT RATIO TRICK

    HTML & CSS

    #recB < background: #eed3ff; width: 100%; >#recB::before < content: ""; display: block; padding-top: 25%; >#squareB < background: #d3ffee; width: 30%; >#squareB::before

    THE RESULT

    HOW IT WORKS

    • First, set the width of the rectangle (or square) by giving it a percentage width – #ID < width: X%; >.
    • The magic happens in the before pseudo-class – #ID::before < content: ""; display: block; padding-top: X% >
    • How it works, is that the percentage padding-top is calculated relative to the width of the container – We use it to control the aspect ratio.
      • In the above example, we have padding-top: 25% on the rectangle. This means it has a height that is 25% of the width, an aspect ratio of 4:1.
      • For squares, we give the container padding-top: 100% . Meaning, the height is equal to the width – Effectively a square, that is.

      3) ADDING & CENTERING TEXT

      HTML & CSS

      #recTxt, #squareTxt < display: flex; align-items: center; justify-content: center; >#recTxt < background: #eed3ff; width: 40vw; height: 20vh; >#squareTxt

      THE RESULT

      THE EXPLANATION

      • Set the container to display: flex .
      • Use align-items: center to vertically center, and justify-content: center to horizontally center. Done.

      4) OVERFLOW TEXT

      HTML & CSS

       #squareC 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
       
      Integer mollis sapien sit amet odio luctus, vel mattis tortor fringilla.
       
      Praesent semper vehicula ante, quis blandit mi tristique eu. Sed vitae vehicula purus.
       

      THE RESULT

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.

      Integer mollis sapien sit amet odio luctus, vel mattis tortor fringilla.

      THE EXPLANATION

      Finally, this is a small example to highlight a potential problem – If there is too much content inside a responsive container, it will “spill out” on the smaller dimensions. To prevent that, we can add overflow:auto to the box. It will result in an ugly scrollbar, but at least it’s not as ugly as spilling contents.

      EXTRA BITS & LINKS

      That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

      LINKS & REFERENCES

      INFOGRAPHIC CHEAT SHEET

      

      THE END

      Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

      Leave a Comment Cancel Reply

      Search

      Breakthrough Javascript

      

      Take pictures with the webcam, voice commands, video calls, GPS, NFC. Yes, all possible with Javascript — Check out Breakthrough Javascript!

      Socials

      About Me

      

      W.S. Toh is a senior web developer and SEO practitioner with over 20 years of experience. Graduated from the University of London. When not secretly being an evil tech ninja, he enjoys photography and working on DIY projects.

      Code Boxx participates in the eBay Partner Network, an affiliate program designed for sites to earn commission fees by linking to ebay.com. We also participate in affiliate programs with Bluehost, ShareASale, Clickbank, and other sites. We are compensated for referring traffic.

      Источник

      Читайте также:  Get для словаря python