Make logo with css

Create a Logo with CSS

Today, we’re creating a simple logo with CSS. Since CSS3 became generally available in all browsers a few years ago, we can use a lot more builtin browser features where before Photoshop became necessary (I just say rounded corners!). Creating a simple logo with CSS is one of these situations where we can leverage recent CSS features such as transform and animation to create something visually appealing!

Create a div container

Create a container that will contain our logo

Create a CSS Class

We’re assigning a new font-size to verify that the class gets applied.

Pick colors and configure display settings

If you don’t already have a color scheme, go ahead and create one. I use https://coolors.co for that. With the new color scheme in place, let’s define a background and text color:

After plugging in the colors you will notice that the expands over the site’s full width.

This happens because is a block element. It automatically expands over the full page width.

By default, a block-level element occupies the entire space of its parent element (container), thereby creating a “block.”

https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

In our case, we’d like the to occupy only as much space as it really needs. We can accomplish this by changing its display setting to inline-block .

What you can see now is that its width has changed so that it only is as long as its content.

With display we can change an HTML element’s way of rendering itself. The setting block ensures that it takes up the full width of its parent container, where inline on the other hand works like this:

The element generates one or more inline element boxes that do not generate line breaks before or after themselves. In normal flow, the next element will be on the same line if there is space

https://developer.mozilla.org/en-US/docs/Web/CSS/display

inline-block is a combination of inline and block :

The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would).

https://developer.mozilla.org/en-US/docs/Web/CSS/display

Set a new font

It’s time for a different font. Right now the logo text is rendered using the browser’s default font. We’d like to customize this a bit.
Instead of the default font, we now use Courier. Add font-family: Courier to the class.

Margin and Padding

The next step is to add some margin and padding to improve optics. Add margin: 15px; and padding: 15px; to the class:

Margin defines the space between the element’s outer borders and its parent conainer, where with padding we can control the space between the element’s inner border and its children.

Time for Transformations

Did you know that CSS can also animate and transform your HTML elements? Let’s get into it.
First, we’ll do some rotation and skew.

Add transform: rotate(-10deg) skew(-17deg); to the class:

transform accepts a bunch of different values. In our case, we’re configuring a -10 degree rotation, followed by a skew. The skew ensures that the text looks a bit more natural. The logo now looks like this:

Animate!

In the last step we’re adding some animation as well. It’s possible to animate a lot of different properties. In our case, we’re focusing on the background color.

We start with defining keyframes .

These define the different states of the animation. We specify a color at 0%, 50% and 100% to ensure a gradient. Once the keyframes are in place, it’s time to use them on our logo class. We add animation: pulse 5s infinite; style for that:

Let’s break down the animation style. We specify that we’d like to use the pulse keyframes in a five second interval. Also, the animation is supposed to run indefinitely. The browser takes care of everything else.

And with this we’re done! You just created your first logo with CSS and animations!

Make sure to checkout the source code for this example on Codepen!

Источник

Create a logo with css3

There is alot of other examples on the same site of complex shapes you can draw with CSS with a little help from JS. Solution 2: Well, since anybody is answering, here you have a draft to begin with CSS fiddle Solution 3: This is probably not the best use of your time, drawing this in CSS. I decided to take on a challenge to use CSS to create famous logos we see every day.

Create a logo with css3

I would like to create a Vodafone logo with css like this one:

I know some people are able to draw anything with css. I can’t figure out how to make the tear drop shape. This is what I have as far as now:

#logoMain < width: 100px; height: 100px; background-color: #f5f5f5; border: 1px solid #ddd; border-radius: 50%; box-shadow: 0px 0px 50px 0px #999 inset; position: relative; >#logoMainafter < width: 100px; height: 100px; margin-top: -35px; margin-left: 55px; display: block; border-radius: 50%; background: -webkit-radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1) 12%, rgba(255, 255, 255, 0) 24%); -webkit-transform: translateX(-80px) translateY(-90px) skewX(-20deg); -webkit-filter: blur(10px); >#logoInside

Can anyone give me any ideas how to create this unusual shape?

For more complex shapes I’d look at using d3js or raphael and the svg element with css backing it. Take a look at this example. There is alot of other examples on the same site of complex shapes you can draw with CSS with a little help from JS.

Well, since anybody is answering, here you have a draft to begin with

#logoMain < width: 100px; height: 100px; background-color: #f5f5f5; border: 1px solid #ddd; border-radius: 50%; box-shadow: 0px 0px 50px 0px #999 inset ; position: relative; >#logoMainafter < width: 100px; height: 100px; margin-top: -35px; margin-left: 55px; display: block; border-radius: 50%; background: -webkit-radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1) 12%, rgba(255, 255, 255, 0) 24%); -webkit-transform: translateX(-80px) translateY(-90px) skewX(-20deg); -webkit-filter: blur(10px); >#logoInside < width: 50px; height: 50px; margin: 24px; background-color: #fe0000; border: 1px solid red; border-radius: 50%; box-shadow: 0px 0px 15px 3px #a80000 inset; z-index: 23; position: absolute; >#logoMain:after < content: ""; width: 50px; height: 50px; position: absolute; top: 2px; left: 57px; /* background-color: green; */ border-radius: 50%; box-shadow: -19px 17px 0px 14px #e80000; clip: rect(0px, 12px, 63px, -110px); z-index: 0; >

This is probably not the best use of your time, drawing this in CSS. Use a graphics editor that is made for it and export it to SVG or any other picture format. The pain you need to go to code this is not worth it.

CSS Logos: Netflix logo, Recreating the Netflix logo in CSS. Let’s create a simple box and set the borders left and right to get started. It’s important to note the 3rem will be the size for each stick. So far, we get the following styled element. Let’s add a before element to add the third skew line. The main idea is that this can be simply the …

How To Make A Logo With HTML And CSS

How To Make A Logo With HTML And CSS | Instagram Logo Design Using CSS Step by step tutorial for beginners ️ SUBSCRIBE: https://goo.gl/tTFmPbIn this video we

Create Google Logo Using CSS

Please LIKE our NEW Facebook page for daily updateshttps://www.facebook.com/Online-Tutorial-Html-Css-JQuery …

Easily Include Your Logo! / HTML + CSS

I Created Famous Logos with CSS

This article was originally posted on my personal blog

CSS is a powerful tool that can do almost anything once you have had a full grasp of it. Sometimes we’re not aware of all the things you can do with CSS, and end up taking a complicated route to do what we need to be done. That’s why we need to always practice CSS and grow our skills in it and knowledge of it.

I decided to take on a challenge to use CSS to create famous logos we see every day. It was a challenge that helped me think better in CSS and understand what means I can use to achieve the expected result.

I’ll list the logos from the least difficult to the most difficult for me. You can check out the entire collection on CodePen.

Google

This one’s concept is pretty simple. We have the letters of Google in different colors, and that’s mostly it. However, there was one problem which is the font. Google uses a custom font for the logo called Product Sans, so I had to resort to what looked the closest to it from Google Fonts, and I choose Poppins.

Youtube

This was another easy one. It was a Box with a triangle inside essentially. However, I had some trouble with making the rounded borders similar to the logo and had to settle for the next closest thing.

Facebook

My problem with the Facebook logo was similar to that of Google; I couldn’t use the same font as it is a custom font, so I had to use Prompt as the f letter looked the most similar to the one in Facebook’s logo.

Instagram

The concept of the logo is simple in Instagram, however, the gradient was a little bit tough. I had to use the help of the internet as well to get it right, but it was a nice take on gradients and seeing what more can be done with it. I haven’t really used gradients heavily before and all of my uses of it were pretty simple, so it was a good practice.

Whatsapp

This one was interesting. So, as I was doing the entire logo in CSS I had to also make the phone shape in the middle with CSS as well. The problem that I had was that I couldn’t figure out how to make the left side of the phone as rounded as it is in the logo. Usually, we use rounded corners a lot which are easy to make, but I’ve never really tried making sort of an arc shape in CSS.

So I searched online and I came upon the border-bottom-left-radius property, which I already knew. However, one thing I probably learned as a beginner but totally forgot about now is that this property can take two values, one for length and one for percentage. The length determines the size of the circle radius or the semi-major and semi-minor axes of the ellipses, whereas the percentage is of the width or height of the box(or element). The first value is for the horizontal axis whereas the second part is for the vertical axis. This property has 4 variations to achieve the same to all 4 sides of the element.

After learning this, I was able to make the phone shape look better and I applied this as well to other logos I worked on. I never really tried using this property before so I still need more practice with it.

Twitter

This one was so frustrating to do and took the longest. I had to leave it at some point and come back to it later. Although it may not look perfect, I’m still really proud of it.

I had to rely a lot on :after and :before pseudo-elements and the border-radius property I learned with Whatsapp. I mostly needed to learn to look outside the box. I broke down the Twitter bird shape into 4 sections and worked my way through it. Although it was frustrating at some points, it was a needed practice not just for my skills in CSS, but also for my creativity as a developer.

Conclusion

I will do part 2 of this challenge and take on other famous logos. If you have ideas for logos that would present a good challenge, leave them in the comments! I also encourage you to take on similar challenges as it is a nice break from the same old and a good way to learn or relearn what we knew but forgot about.

CSS Icons — W3Schools, W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

How to make a logo css slider?

I tried to make a logo slider using Owl carousel. But the carousel isn’t appearing.

I want my carousel to look like this:

.owl-carousel .item < margin: 3px; >.owl-carousel .item img

and in my html I included the script:

How can I make the slider appear? Or is there an easier way to achieve this slider look?

You need to include the owl carousel file after you have included JQuery like so:

CSS Styling Links, Try it Yourself ». In addition, links can be styled differently depending on what state they are in. The four links states are: a:link — a normal, unvisited link. a:visited — a link the user has visited. a:hover — a link when the user mouses over it. a:active — a link the moment it is clicked. Example.

Источник