https://www.cssvg.co/App/
SVG Animator
`
https://freefrontend.com/css-text-effects/
https://freefrontend.com/javascript-text-effects/
Animating SVGs
https://www.creativebloq.com/how-to/add-animation-to-svg-with-css
1. Create and save
First, create an SVG to work with. For this tutorial, we will be using a simple graphic made in Illustrator. When using Illustrator to export an SVG reduce the size of the artboard to fit the graphic, then click 'Save As'. Select SVG from the 'save as type' dropdown menu, then 'SVG code…' on the SVG Options dialogue.
02. Optimise for the web
Click the icon in the top right to enlarge the image Image: SVGOMG]
Cutting out unnecessary tags will make the image easier to deal with. This can be done manually by copying the code to your favourite editor and removing empty tags and metadata. Alternatively, a fantastic resource called SVGOMG will do this automatically. Paste the code into the 'Paste markup' area on the SVGOMG interface, then copy the image again using the button on the bottom right.
03. Set up a HTML Document
Open your code editor of choice and set up a blank HTML document. We will write the CSS animation in a file called main.css, so create this too. To keep things focused on the animation, we've pulled in the CSS-only version of Bootstrap 4.1.3.
04. Build the layout
Let's build the bones of our layout and make a space for our SVG. We've added a header and two columns: one on the left for some text, and one on the right, which will hold the SVG that we'll be animating. To liven the page up, use a second, static, SVG as a background on the body tag.
05. Place the SVG
We're using our animation to make the introduction at the top of the page more interesting. Paste the optimised SVG code into the second column on the page. If using bootstrap, give the SVG the class img-fluid to make sure it scales on mobiles.
06. Add classes to the SVG
Adding classes to the SVG allows CSS to select the individual shapes within the image. This means you can animate different shapes of the image at different times, creating a more complex effect.
<svg>
<g>
<rect class="rectBackground" width="147.4107"
height="68.7917" x="31.2946" y="114.1042"
rx="4.5882" ry="3.9565" fill="#2a7fff"/>
<path class="rectText" d="..." vector-effect="non-scaling-stroke" stroke-width=".470476156" font-size="12" fill="#fff"
fill-rule="evenodd" stroke="#fff" stroke-linecap="round"/>
</g>
</svg>
07. Initial states
Selecting our SVG elements in CSS is the same as any other element. We use our classes to select those elements within the SVG. Both parts of our SVG will start as hidden when the page loads, so let's use CSS to set both element's opacity to 0.
path.rectText {
opacity:0;
}
rect.rectBackground{
opacity: 0;
}
08. Declare the animations
We need to declare the name and keyframes for each animation so that CSS knows what we want to do when we ask it to perform an effect. I've chosen textDraw and rectFade, as they describe each animation. rectFade will be a simple two-step animation. textDraw will have an extra middle step.
@keyframes textDraw {
0%{}
50%{}
100%{}
}
@keyframes rectFade{
from{}
to{}
}
09. Assign animation and properties in the top right to enlarge the image Image: Joseph Ford]
We add the rectFade animation to the rectBackground element and give it a duration of one second. An easeOut cubic bezier is being used to give it a smoother feel. We add forwards so the element keeps the properties of the last keyframe when the animation ends.
rect.rectBackground{
opacity: 0;
animation: rectFade 1s cubic-bezier(0.645,
0.045, 0.355, 1) forwards;
}
10. The rectangle animation
https://www.creativebloq.com/how-to/add-animation-to-svg-with-css)
With just two keyframes, all we need to do for our rectangle is set a start and finish set of attributes. Let's start with a 1% width and finish on 100% to give an 'expanding to the right effect'. We can also set opacity: 1 to the last keyframe so the shape fades in at the same time.
@keyframes rectFade{
from {
width: 1%;
}
to {
width:100%;
opacity: 1;
}
}
11. The text animation
We're going to create a line-draw effect on our text then use a fill to fade in. To set up the text animation we give it our textDraw with a four second duration. The cubic bezier has been modified on this step to give it a slightly different pace of movement.
path.rectText {
opacity:0;
animation: textDraw 4s
cubic-bezier(.56,-0.04,.32,.7) forwards;
}
12. Delay the start
Our text needs to run just as the rectangle has finished fading in. Because the rectangle has a one second duration, delay the start of the text animation by that time.
path.rectText {
opacity:0;
animation: textDraw 4s
cubic-bezier(.56,-0.04,.32,.7) forwards;
animation-delay: 1s;
}
13. Emulate line drawing
Click the icon in the top right to enlarge the image Image: Joseph Ford]
To get our line drawing effect we will use the stroke-dasharray and stroke-dashoffset parameters. Your values will be different to mine depending on the SVG you are using. To find your value, use your preferred developer tools and increase stroke-dasharray from 0 until the entire shape is covered by one stroke.
path.rectText {
opacity:0;
stroke-dasharray: 735;
animation: textDraw 4s
cubic-bezier(.56,-0.04,.32,.7) forwards;
animation-delay: 1s;
}
14. First line drawing keyframe
Now we have our one very large stroke that covers the entire text path, let's offset it by its own length to effectively push it away. Using stroke-dashoffset for the same value as our dasharray should do it. Let's set this in our first keyframe. We'll also make the shape fill transparent and set the stroke to white if it isn't already.
0%{
fill:rgb(255, 255, 255, 0);
stroke:#fff;
stroke-dashoffset: 800;
opacity: 1;
}
15. Draw the lines
Our middle keyframe appears at 40% through the animation. We bring the stroke-dashoffset back to zero so the dash covers the entire path. We can re-add the transparent fill at this stage to make sure the fill only appears once the drawing is complete.
40%{
stroke-dashoffset: 0;
fill:rgb(255, 255, 255, 0.0);
}
16. Fill in the shape
For the last part of the animation, we will fill the shape in white. All we need to do for the last keyframe is raise the alpha value of the fill colour. This creates the fade-in effect of the fill.
100%{
fill:rgb(255, 255, 255, 1);
stroke-dashoffset: 0;
opacity: 1;
}
https://www.creativebloq.com/how-to/add-svg-filters-with-css
VG has been around since the early 2000s, and yet there are still interesting ways that designers are finding to use it. In this tutorial the focus will be on the filters that are applied through SVG – but instead of applying them to an SVG image, we'll show you how they can be applied to any regular page content.
The way the filter is applied to the SVG is actually through CSS, by telling it what ID the filter has. Using that same idea, the filter can be applied to regular text, for example. The good part about this is that you can add some great graphical looks to your text, which would have only been previously possible by applying a number of Photoshop filters and saving as an image. Using the SVG filter, the text remains accessible and selectable, as it is still just a regular text element on your page.
The code here will create a displacement map to text that also contains an alpha map to make it appear watery and fit the theme of the page. Then another filter will be created that makes a menu appear as water blobs, which stick slightly together but blob apart as they move further away. Again this keeps with the theme of this particular page and shows two creative ways to apply SVG filters to other content.
Interested in learning more about SVG? Take a look at our article on everything you need to know about SVG on the web. Alternatively, add some interest to your sites with one of these cool CSS animation examples.
- Download the files for this tutorial from FileSilo
01. Get started
First, you need to download the project files using the link directly above. Once you've done that, drag the start project folder onto your code IDE and open the index.html page. You will see there is some page content already written. The header section needs to be created, and this will contain the headline that will be affected by an SVG filter. Add the code here, just inside the body tag.
<div class="bg">
<div class="middle">
<h4 class="headline">Underwater
Adventure Park</h4>
<div class="intro_block">
02. Close the header
Now the header is finished, with all the text for it in place. If you view your page in the browser at the moment, you will see a water image with some text on it. The headline, which is still currently unstyled, is going to be styled up and have the SVG filter applied to it.
<h5 class="subhead">Experience the Ocean
<br>Like Never Before</h5>
<p class="intro">Underwater
Adventure Park is an experience
unlinke anything you have ever
had. Travel to the depths of
the Ocean and walk among the
Sea Life!</p>
</div>
</div>
</div>
03. Create an SVG filter
The SVG code can be added anywhere on the page, but as it won't be seen, it can be a good idea to place it at the bottom, before the closing body tag. The SVG filter creates turbulence noise. Notice the filter has an ID – this is what enables the CSS to apply this to another element on the page.
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="displacementFilter">
<feTurbulence type="turbulence"
baseFrequency="0.004" numOctaves=
"2" result="turbulence" />
</filter>
</svg>
04. Hide the SVG
Move over to the page.css file now, and above all the CSS code for the rest of the page will be where our new CSS will go. Here the SVG is set to not display on the page at all. The heading two tag is set to have the right typeface applied to it.
svg {
display: none;
}
h4 {
font-size: 5.5vw;
font-family: 'Crete Round', serif;
}
05. Add to the headline
The line-height is set to zero because later the headline will be animated, so having control over its scaling on the page is important. It's also given some padding so that it sits with the right amount of space around it and the colour is changed.
.headline {
line-height: 0;
display: inline-block;
padding: 70px;
color: #ccffff;
06. Finish the headline
The SVG will be used to displace the headline text
In finishing off the headline class, the next line applies the displacementFilter ID in the SVG to the text. The translate3d ensures that the text becomes hardware accelerated. The scale is changed slightly to ensure that when the displacement is applied it looks right.
filter: url(#displacementFilter);
transform: translate3d(0, 0, 0);
transform: scaleY(1.8) rotateY(-2deg);
}
07. Make it displace
And now the text is displaced
If you test the filter at this stage the turbulence completely replaces the text. That's easy to fix. Go back to the filter code in the index.html page. This takes the turbulence and the source graphic, which is the text, and applies it as a displacement filter. Try changing the base frequency and the number of octaves in the turbulence.
<feDisplacementMap in2="turbulence" in="
SourceGraphic" scale="30" xChannelSelector="R"
yChannelSelector="G" result="disp" />
08. Soften the edges
Use a Gaussian blur to soften the text
The edges look a little harsh for a watery effect. That can be cured with a Gaussian blur. Add the code after the displacement map. When you refresh the page, it has definitely blurred the text but the displacement is gone. Again these are elements that can be fixed on the way to creating the effect.
<feGaussianBlur in="SourceGraphic"
stdDeviation="15" result="blr" />
09. Composite the two
Combine the blur and displacement for a more pleasing effect
Add the composite line here below the previous Gaussian blur. You will see that this combines the blur and the displacement together, and also creates a watery translucent effect to the text. It has gone some way to softening the edges, but not enough. It would be good if the original blur could be added into this.
<feComposite in="blr" in2="disp" operator="in" result="comp" />
10. Merge the blur
With a merge operation it'll look even better
A merge operation enables the final result of the composite to be merged with the blur effect. This now looks like it fits with the background image and seems to fit with the lines of light coming through the water. The best part about the text is that it is still selectable and part of the page, unlike if you created this in Photoshop.
<feMerge result="final">
<feMergeNode in="blr" />
<feMergeNode in="comp" />
</feMerge>
11. Create an animation
Go back to the page.css file and add in the keyframes as shown here. This will just scale up the font size from a zero vertical width to a 5.5 vertical width. At the start this will be applied to the headline, so that the text scales up and into place on the screen. As the text moves, the displacement will also change over the length, giving a watery ripple.
@keyframes scaler {
from {
font-size: 0vw;
}
to {
font-size: 5.5vw;
}
}
12. Change the h4 style
Replace the h4 to bring in some animation
The h4 style was previously added in step 4. Replace that code with this new code, which adds the CSS animation over four seconds to the heading. The animation stops and holds on the last keyframe. Save this and test it in the browser to see the text rippling into place.
h4 {
line-height: 0;
font-size: 0vw;
animation-name: scaler;
animation-duration: 4s;
animation-fill-mode: forwards;
font-family: 'Crete Round', serif;
}
13. Add navigation
Now let's create a suitable water blob-inspired animation using another SVG filter. Add the following navigation content to the very top of the body code, before the heading that was started in the first step of the tutorial. This will create the basics of a hamburger menu in a circle.
<nav class="menu">
<input type="checkbox" href="#" class=
"menu-open" name="menu-open" id="menu-
open" />
<label class="menu-open-button"
for="menu-open">
<span class="hamburger
hamburger-1"></span>
<span class="hamburger
hamburger-2"></span>
<span class="hamburger
hamburger-3"></span>
</label>
14. Finish the navigation
Now the remaining navigation elements can be added. This also uses the Font Awesome open source icon library, which has been added to the head section to link from the CDN of this library. Each menu circular element will have an icon inside of it.
<a href="#" class="menu-item"> <i class="fa
fa-car"></i> </a>
<a href="#" class="menu-item"> <i
class="fa fa-ship"></i> </a>
<a href="#" class="menu-item"> <i
class="fa fa-map"></i> </a>
<a href="#" class="menu-item"> <i
class="fa fa-suitcase"></i> </a>
</nav>
15. Add the new filter
Another filter is going to be added for this effect. In the SVG, add this code after the closing filter tag of the code added previously. Here the effects are built up in a very similar way to previously. This will allow for the menu to look like sticky blobs of liquid moving apart.
<filter id="shadowed-blob">
<feGaussianBlur in="SourceGraphic"
result="blur" stdDeviation="20" />
<feColorMatrix in="blur" mode=
"matrix" values="1 0 0 0 0 0 1 0 0
0 0 0 1 0 0 0 0 0 18 -7"
result="blob" />
<feGaussianBlur in="blob"
stdDeviation="3" result="shadow" />
<feColorMatrix in="shadow" mode=
"matrix" values="0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0 0 1 -0.2"
result="shadow" />
16. Finish the filter
The remainder of the filter is added here, which completes the effect that will be placed on each circle of the menu items. This will cause the elements to have the liquid blob effect added. Save this page and then switch over to the 'design.css' file.
<feOffset in="shadow" dx="0" dy="2"
result="shadow" />
<feComposite in2="shadow" in="blob"
result="blob" />
<feComposite in2="blob"
in="SourceGraphic" result="mix" />
</filter>
17. Apply the filter
The CSS code can now be added to the different design.css, just to keep all of the navigation CSS together in the same place. Some code has been added, but here the filter is applied to the menu, which will be a fixed menu so that it is present on the screen at all times.
.menu {
filter: url(“#shadowed-blob");
position: fixed;
padding-top: 20px;
padding-left: 80px;
width: 650px;
height: 150px;
box-sizing: border-box;
font-size: 20px;
text-align: left;
}
18. Make the menu work
The menu is set to turn invisible when the menu is open. The hover element of each of the menu items is created so that there is a change when the user hovers over this. Each child of the menu is given a 0.4-second transition when the menu items are returning to their original position.
.menu-open {
display: none;
}
.menu-item:hover {
background: #47959f;
color: #b2f0f8;
}
.menu-item:nth-child(3), .menu-item:nth-
child(4), .menu-item:nth-child(5), .menu-
item:nth-child(6) {
transition-duration: 400ms;
}
19. Add a hamburger
Change the burger icon's z-index to bring it to the top
The burger icon is elevated above the other elements by changing its z-index. The menu grows when the user hovers over this, and clicking the menu will now get the burger to animate from three lines of a burger to an 'X', indicating the option to remove the menu.
.menu-open-button {
z-index: 2;
transition-timing-function: cubic-
bezier(0.175, 0.885, 0.32, 1.275);
transition-duration: 400ms;
transform: scale(1.1, 1.1) translate3d
(0, 0, 0);
cursor: pointer;
}
.menu-open-button:hover {
transform: scale(1.2, 1.2) translate3d
(0, 0, 0);
}
20. Move the elements
The first menu item is actually the third child of the menu, as there is a checkbox and the hamburger before it. Adding this enables the first menu element to move into position once the menu is clicked by the user. Each menu element will move out with a slightly longer time.
.menu-open:checked + .menu-open-button {
transition-timing-function: linear;
transition-duration: 400ms;
transform: scale(0.8, 0.8) translate3d
(0, 0, 0);
}
.menu-open:checked ~ .menu-item {
transition-timing-function: cubic-
bezier(0.165, 0.84, 0.44, 1);
}
.menu-open:checked ~ .menu-item:nth-child(3) {
transition-duration: 390ms;
transform: translate3d(110px, 0, 0);
}
21. Address the remaining movement
Move the menu elements at different speeds for a more liquid look
The remaining menu elements are moved out with different speeds. This enables the elements to stick together in the early stages of the animation, which will give the blobby liquid look, using the SVG filter. Save the documents and see the finished results in your browser.
.menu-open:checked ~ .menu-item:nth-child(4) {
transition-duration: 490ms;
transform: translate3d(220px, 0, 0);
}
.menu-open:checked ~ .menu-item:nth-child(5) {
transition-duration: 590ms;
transform: translate3d(330px, 0, 0);
}
.menu-open:checked ~ .menu-item:nth-child(6) {
transition-duration: 690ms;
transform: translate3d(440px, 0, 0);
}
https://www.creativebloq.com/how-to/design-with-css-shapes
CSS Shapes
The basis of every website is to sub-divide the page down into smaller elements that have content. The big problem with this for designers is that the content is always a rectangle. Screens are rectangular in shape, and any subdivision of that is going to be a rectangle. In this tutorial we are going to examine how to go beyond rectangular shapes by using the CSS clip-path property and rotation to make the design more interesting. For other ways to make your designs more interesting, check out our examples of CSS animation. If all this sounds like too much work, try a top website builder instead. But whatever the needs of your site, you need to get the right web hosting for you.
The easiest shape to start with is a circle or oval. If you have a rectangle and you set all of the border radius to more than 50 per cent you will have an oval, and if you start with a square, because all the sides are the same length, you will get a circle. This is something you’ve probably done before, but it's a technique that is often underused in the design of pages.
A more complex solution is to create a triangle by using the CSS clip-path to reduce the visible part of a div. A triangle is quite a simple shape to create because it has only three points, but if you want to create more complex shapes then a visual clip-path editor will be required.
This tutorial will show you how to add all of these elements together, including gradients and rotating rectangles, to create a more unique design. Add CSS gradients, and a complex geometric design can be created through CSS.
01. Get started
Open the start folder in your IDE code editor and start editing the index.html page. To start off the tutorial, a simple link-up to Google Fonts typefaces will be required so that when some text is included later it can have the appropriate typefaces added to the page.
<link rel="stylesheet" href="css/shapes.css">
<link href="https://fonts.googleapis.com/
css?family=Arvo:700|Lato:700" rel="stylesheet">
02. Anchor the shapes together
In the body tag on the page add the following content. The shape contain div tag will be used to hold all of the different shapes that are produced, and this will be made to fill the browser viewport. The first shape to be created will be a simple circle, which will anchor the other images together.
<div id="shape_contain">
<div id="circle"></div>
</div>
03. Make the page
Now move over to the CSS folder and open the shapes.css file. The body and HTML are just set to fill the browser with the right font family, set up for the majority of the text that will be added towards the end of the tutorial as the finishing touches.
body,
html {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
overflow-x: hidden;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
}
04. Contain the shapes
Start with your background image in place
The next CSS rule is for the div with the ID of shape_contain. This is set to fill the browser with any overflow hidden. The translate3d is to ensure that the content is hardware-accelerated. A large border is added before two background images. One is a regular image while the one above is an aqua-coloured, semi-transparent gradient.
#shape_contain {
box-sizing: border-box;
width: 100%;
height: 100vh;
overflow: hidden;
transform: translate3d(0, 0, 0);
border: 20px solid rgb(255, 254, 244);
background: linear-gradient(0deg, rgba (7,
47, 46, 0.8) 0%, rgba(255, 252, 226, 0.5)
100%), url(../images/mountain.jpg)
no-repeat center center;
background-size: cover;
}
05. Start with a circle
Circles are the easiest shape to create
The first geometric shape that will be created is one of the most simple shapes. A circle can be made out of any square-shaped div by adding a border radius of 50%. The circle is semi-transparent, with a soft shadow added to the edge of it.
#circle {
width: 80vh;
height: 80vh;
border-radius: 50%;
background: rgba(136, 239, 231, 0.3);
position: absolute;
top: 7vh;
left: 50%;
transform: translate3d(-50%, 0, 0);
box-shadow: 0px 5px 40px rgba(0, 0, 0, 0.3);
}
06. Try a triangle
The next shape will be slightly more complex because it is a triangle. It’s relatively straightforward to create by using the CSS clip-path that allows for a polygon shape to be created. Add this div into the shape_contain div.
<div id="tri1"></div>
07. Apply the triangle
A filter shifts the hue slightly
Here the clip-path is created for the CSS to make the triangle. The shape is simply three points. The background image is added, and a filter is added here so that hue can be shifted slightly, which makes the image take on a slight pink tint that is emphasised with the contrast.
#tri1 {
clip-path: polygon(0 0, 100% 0, 50%
100%);
width: 100vh;
height: 88vh;
background: url(../images/girl3.jpg)
no-repeat center center;
background-size: cover;
position: absolute;
top: 10vh;
left: 50%;
transform: translate3d(-50%, 0, 0);
filter: hue-rotate(310deg) contrast(140%);
opacity: 0.8;
}
08. Go more complex
This tool enables you to create more complex shapes
The next shape to be created will be a triangle with a hole in the middle. This sounds relatively straightforward, but the clip polygon needs to be one continuous line, so it’s more complex to create. If you need to create a similar shape, use Bennett Feely's clip-path maker to create the shape.
<div id="tri2"></div>
09. Stack the shapes
The shape here is more complex because it was visually created in the link previously mentioned. The clouds image is placed into the shape and then the hue is adjusted to make this a little more yellow. Each shape is positioned absolutely, in the centre of the surrounding div, and stacked one on top of the other.
#tri2 {
clip-path: polygon(50% 0, 0% 100%, 9% 100%,
50% 17%, 50% 17%, 85% 91%, 13% 91%, 0 100%,
100% 100%, 50% 0);
width: 80vh;
height: 70vh;
background: url(../images/clouds.jpg)
no-repeat center center;
background-size: cover;
position: absolute;
top: 1vh;
left: 50%;
transform: translate3d(-50%, 0, 0);
filter: hue-rotate(90deg) contrast(140%);
opacity: 0.7;}
10. Try resizing the browser
The next triangle should be added into the shape_contain div. If you check the browser you’ll see that you can resize the browser and the shapes will resize perfectly, as they are based on percentages. The container is set with the viewport height so it will always fit in the screen.
<div id="tri3"></div>
11. Style it up
The final triangle has a hole in the centre
The final triangle uses the same shape as the previous one with the hole in the centre. This time it has just a simple shade of turquoise rather than an image. The transparency is set low to be able to see through this triangle to the other content below.
#tri3 {
clip-path: polygon(50% 0, 0% 100%, 9% 100%,
50% 17%, 50% 17%, 85% 91%, 13% 91%, 0 100%,
100% 100%, 50% 0);
width: 80vh;
height: 70vh;
background: rgba(0, 113, 110, 0.2);
position: absolute;
top: 20vh;
left: 50%;
transform: translate3d(-50%, 0, 0);
}
12. Create an angled strip
Blend the angled strip using a semi-transparent gradient
The next shape is an angled div shape. This will be placed in between triangle one and two in the shape_contain div tag. Blend it into the page using a semi-transparent gradient across the screen. These will also scale up and down to different-sized screens.
<div id="strip1" class="strip"></div>
13. Make the angles
The ID sets the position of the shape
The strip class sets the background gradient. This is made using the online gradient editor CSS Gradient. The ID then sets the position of this particular angled gradient shape. It is placed in the centre and then offset slightly so that it retains consistent placement on different monitors.
.strip {
position: absolute;
background: linear-gradient(0deg, rgba(164,
0, 217, 0) 0%, rgba(164, 0, 217, 0.3) 35%,
rgba(255, 67, 134, 0.3) 65%, rgba(255, 67,
134, 0) 100%);
}
#strip1 {
width: 20vh;
height: 120vh;
left: 50%;
transform: translate3d(-175%, -15%, 0)
rotateZ(30deg);
}
14. Try more gradient angles
Two more div tags are now added that hold the class of strip. The ID will enable them to be placed in different positions on the screen. These are used as repetitive shapes that build up the overall aesthetic of the scene, while also adding a splash of colour.
<div id="strip2" class="strip"></div>
<div id="strip3" class="strip"></div>
15. Position the angle
Final additions help balance the design out
The two strip angle gradient shapes are positioned to each side of the main content on the screen. One is placed towards the lower left and the other towards the upper right so that it balances the screen out. Resize the browser to see these elements stick in place on the screen and scale to fit.
#strip2 {
width: 5vh;
height: 90vh;
left: 50%;
transform: translate3d(60vh, -15%, 0)
rotateZ(30deg);
}
#strip3 {
width: 5vh;
height: 90vh;
left: 50%;
transform: translate3d(-70vh, 25%, 0)
rotateZ(30deg);
}
16. Add some text content
This page doesn’t have a huge amount of text content, but the divs here have all of the remaining page content to be placed on the screen. The divs should be added before the closing div tag of the shape_contain panel. These text elements will be split into different corners.
<div id="leftside">Go beyond the rectangle
</div>
<div id="rightside">Responsive shape
layouts</div>
<div id="topLeft">Web Designers
<br><span>CSS Toolkit</span></div>
<div id="topRight">2019</div>
<div id="headline">CSS Shapes</div>
17. Rotate the text
The left-side div is positioned absolutely on the left-hand side of the screen, and it is rotated round anti-clockwise by 90 degrees so that it fits down the side. The transform origin is moved slightly to make the text fit closer to the edge of the screen.
#leftside {
position: absolute;
left: 20px;
top: 70%;
transform-origin: 10% 0%;
transform: rotate(-90deg);
}
18. Position the right-hand text
The right-hand text is very similar to the left text except it’s positioned over from the right-hand side of the screen. The rotation should be pushed round clockwise so that the text sits better and reads easier on the right of the screen.
#rightside {
position: absolute;
right: 20px;
top: 70%;
transform-origin: 90% 0%;
transform: rotate(90deg);
}
19. Stylise the text
Now the text for the top-left corner is stylised. The first two words are left at their default size, while the remaining words are enlarged and positioned on the next line down in order to provide some hierarchy to the text. This will stick to the top left corner through any resizing.
#topLeft {
position: absolute;
left: 40px;
top: 40px;
width: 180px;
text-align: center;
}
#topLeft span {
font-size: 1.8em;
}
20. Set the right-hand text
The text for the top-right corner is now set. This is set inside a black round circle, with the text set in white against the circle. This uses the line height method for aligning the text in the centre, by using the line height the same as the div height.
#topRight {
position: absolute;
right: 35px;
top: 25px;
line-height: 100px;
font-size: 1.4em;
width: 100px;
height: 100px;
background: #000;
color: #fff;
text-align: center;
border-radius: 50%;
}
21. Set the headline text
The last text to be set is the main headline
The very last text to be set is the main headline in the centre of the screen. The typeface is changed for this, and it is given a light pink semi-transparent colour so that it blends with the highlight colour of this page design. Save the page and refresh your browser to see the finished result. Want to save or share a copy of the page? Export it as a PDF and save it in cloud storage.
#headline {
position: absolute;
width: 100%;
z-index: 200;
padding-top: 65vh;
font-family: 'Arvo', serif;
text-align: center;
color: rgba(233, 173, 255, 0.8);
font-size: 8vw;
text-shadow: 0px 3px 50px rgba(0, 0, 0, 0.5);
}
This article was originally published in creative web design magazine Web Designer. Buy issue 284 or subscribe.
Read more:
https://www.creativebloq.com/how-to/code-smart-text-effects-with-css
smart text effects
Rollover links are a great way to grab a user's attention, especially if they do something unusual or original. Middle Child has a great effect, seldom seen elsewhere, that captures each letter and splits them apart with animation, which kicks in when the visitor hovers over the word. The animation helps convey the sandwich brand's playful character.
In this article, we show you how to recreate the effect on your site. For more inspiration, take a look at our guide to the best CSS animation examples (with instructions on how to code them). For something a bit different, try a top website builder or our pick of the best cloud storage. And if you're making your site more complex, make sure your web hosting is on point.
01. Rollover text effect
One of the great text effects on the Middle Child website is for the rollover effects on the menu, where the letters split apart on the text and rotate slightly. Start this with some simple HTML tags.
<div class="wrapper">
<div class="word">Breakfast</div>
</div>
02. Create CSS
Use a separate CSS file or style tags to add the following CSS rules and make the page fill the full size of the browser by ensuring the body and the wrapper take the full height available.
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
display: grid;
height: 100%;
}
03. Position the word
The word class centres the word in the grid. Any text that is given the word class can have this applied. The up class is going to be applied to every other letter and these will move upwards.
.word {
font-size: 3em;
margin: auto auto;
}
.word .up
{
display: inline-block;
transform: translate3d(0px, 0px, 0px)
rotate(0deg);
transition: all 0.5s ease-in-out;
}
04. Up and over
Now the down class shares very similar settings to the up but the hover shows the movement upwards for the up rollover. Upwards is also rotated slightly to enhance the look.
.word .down
{
display: inline-block;
transform: translate3d(0px, 0px, 0px)
rotate(0deg);
transition: all 0.5s ease-in-out;
}
.word:hover .up
{
transform: translate3d(0px, -8px, 0px)
rotate(12deg);
color: #058b05
}
05. Hovering down
When the user hovers over the text, the down class moves the text downwards. Later in JavaScript the text will be split into separate spans with the classes added automatically to alternate spans.
.word:hover .down {
transform: translate3d(0px, 8px, 0px)
rotate(-12deg);
color: #058b05;
}
06. Automatic for the people
It's a bit of a hassle to have to put every letter in alternating spans with different classes, so we'll automate the process by getting JavaScript to query the selector and take each letter. Here the str variable grabs the current letter as it loops through the text.
<script>
var elements = document.querySelectorAll
('.word');
for (var i = 0, l = elements.length; i
< l; i++) {
var str = elements[i].textContent;
elements[i].innerHTML = '';
07. Add alternating classes
Now another loop places each letter in its own span element and adds either the up or down class to the spans. If you look at this in the browser you will see the text split by each letter up and down, while rotating slightly.
You can see the effect in action on the Middle Child website.
for (var j = 0, ll = str.length; j
< ll; j++) {
var spn = document.createElement('span');
elements[i].appendChild(spn);
spn.textContent = str[j];
let pos = (j % 2) ? 'up' : 'down';
spn.classList.add(pos);
}
}
</script>
This article was originally published in creative web design magazine Web Designer. Buy issue 286 or subscribe.
Read more: