Animated Gradient Background

6 Contemporary Designs Using CSS with Code Samples for 2023

A web product’s visual appeal can often make or break it. With the continued support from the community and the enhancement of tools, the aesthetics and functionality of CSS designs have improved substantially. This improvement has benefited many businesses by enhancing user experience and engagement, directly leading to the organization’s commercial health. So how can you make the most of CSS designs? Let’s find out!

In this blog post, we will look into the web designing approach and contemporary designs using CSS with code samples.

• What are HTML and CSS designs?

• How to create contemporary designs using HTML and CSS?

• CSS designs with code samples

• • • CSS gradient background
    • Parallax CSS designs
    • Responsive CSS designs
    • 3D CSS web design
    • Typography
    • Dynamic layout
    • In sum

    What are HTML and CSS designs?

    HTML (Hyper Text Markup Language) is the infrastructure of the web page, which includes different elements with unique “ids” and “classes,” and CSS, which stands for Cascading Style Sheets, is the construction of the individual elements. Both are vital for developing web interfaces.

    Multiple types of web designs can be created using HTML and CSS.

    

    How to create contemporary designs using HTML and CSS?

    Building a modern-day website with contemporary CSS designs is no longer a challenging process as you’ve got access to all of the essential tools and frameworks to develop a visually appealing as well as accessible front end.

    Organize the layout or structure: To create a contemporary design using CSS, ensure the layout/structure is well organized; it can be on paper or in a graphic design. This reference helps create the infrastructure and design the placeholders for different components and elements.

    

    Web Design Layout

    CSS designs with code samples

    CSS layouts, structures, and properties can be used to build modern web designs. The ideal design is determined by the website’s specific requirements and goals.

    Here are some significant CSS design types and layouts to create a contemporary web design in 2023.

    CSS gradient background

    Designing a background with the appropriate color scheme is critical for highlighting the elements on the screen. When we utilize Gradient effects on the backdrop, it improves the overall appearance. With a simple CSS design , we can implement a gradient background.

    First, we need to provide the background with gradient colors according to the color scheme,

    background: linear-gradient (-45deg, #5C54CF, #B34FE0, #FDB721, #FB3443)

    Then provide the animation to the background. Here the animation name is changed. We will also provide the duration of the animation.

    animation: change 15s ease infinite

    After creating the background, we declare the animation with the keyframes rule in our CSS web design.

    Here’s the whole code sample for gradient background animation using HTML and CSS.

        body < background: linear-gradient(-45deg, #5C54CF, #B34FE0, #FDB721, #FB3443); background-size: 400% 400%; animation: change 15s ease infinite; >@keyframes change < 0% < background-position: 0% 50%; >50% < background-position: 100% 50%; >100% < background-position: 0% 50%; >> h1 < text-align: center; color: black; font-family: 'Gordita'; font-size: 4rem; margin-top: 40vh; >p 
    Background Effect with CSS
     
    This is an example of an animated gradient background using CSS.
      

    Parallax CSS designs

    Parallax is a popular contemporary CSS design technique that produces a 3D illusion by animating separate layers at different speeds as the user scrolls. The position of different elements (mostly images) plays a vital role in creating the parallax effect.

    Having graphics ready is crucial to start to create this effect.

    Here class “parallax-container” will define the section of the web page where the parallax effect will be applied.

    .parallax-container < position: relative; height: 500px; >.parallax

    The parallax class is used to specify the moving backdrop image. The CSS method translate3d() is used to shift the background pictures up or down based on how far the user has scrolled.

    Integrate jQuery (JavaScript) to implement the parallax animation on the containers.

    Here scroll event and requestAnimationFrame() optimize performance for a parallax animation effect. To animate background pictures for each parallax element, the loop uses a translate3d() transformation.

    The overall code of CSS design for the parallax effect:

       .content < background: #000000; height: 75vh; display: flex; /* added display flex */ align-items: center; justify-content: center; /* added justify-content center */ color: #ffffff; >.parallax-container < position: relative; height: 500px; >.parallax 
    Parrllax Effect (Scroll Down)
     
     
     
     
     
     
     
       

    Responsive CSS designs

    Responsive design is a no-brainer for designing today’s web products; it’s crucial to implement it in the very first place.

    Responsive CSS design aims to produce websites that adjust to various screen sizes and device varieties. The objective is to guarantee that the website appears and performs properly on all platforms, including desktop computers, laptops, tablets, and phones.

    Let’s use simple CSS to implement the responsive design on the image and the parallel text.

            
      
    The Modern Day Life
     
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel elit eget elit mollis convallis. Aliquam bibendum tortor non augue laoreet, quis lacinia nisl pharetra.
     
     
       

    With the simple use of the viewport property in HTML, the responsive design of the web page can be achieved.

    3D CSS web design

    CSS designs with 3D effects are getting better and better day by day. The CSS’s frameworks and flexibility allow engineers to create super-effective 3d designs.

    A solar system 3D design curated using CSS by Julian Garnier showcases the implementation of different CSS design principles.

    This CSS design uses rules like keyframes and media and includes the navigations and transition properties to create a 3d effect.

    With different shapes and designing properties of CSS, the solar system with concise accuracy has been created. You can create 3d effects on simple shapes, containers, or text to enhance the user experience.

    Typography

    Typography in CSS web design simply refers to the visualization of the text; it can be its font, position, and other properties. But here, typography designs using CSS means creating visually appealing text for the user to catch their attention and enhance the overall experience.

    Here is an effective code sample for creating aesthetic typography with simple CSS ( Resource )

    * < box-sizing: border-box >:root < --color-1: #186cb8; --color-2: #2a9a9f; --color-3: #f1b211; --color-4: #e83611; --color-5: #f9002f; >.wrapper < background: #000; line-height: 1; min-height: 100%; display: grid; place-items: center; min-height: calc(100vh - 16px); >h1 < font-family: "Exo", sans-serif; font-size: 15vw; font-weight: 900; width: -webkit-min-content; width: -moz-min-content; width: min-content; margin: auto; text-transform: uppercase; background: linear-gradient(219deg, var(--color-1) 19%, transparent 19%,transparent 20%, var(--color-2) 20%, var(--color-2) 39%, transparent 39%,transparent 40%, var(--color-3) 40%,var(--color-3) 59% , transparent 59%,transparent 60%, var(--color-4) 60%, var(--color-4) 79%, transparent 79%, transparent 80%, var(--color-5) 80%); background-clip: text; -webkit-background-clip: text; color: transparent; >.container < padding: 1.5rem; text-align: center; background: radial-gradient(circle at 1.4% 1.4% ,var(--color-1) .8%,transparent .8% ), radial-gradient(circle at 5.5% 3%,var(--color-2) .45% ,transparent .45% ), radial-gradient(circle at 2.5% 3.5%,var(--color-3) .5% ,transparent .5% ), radial-gradient(circle at 4.5% 1.2%,var(--color-4) .25%,transparent .25% ), radial-gradient(circle at 98% 98% ,var(--color-1) .8%,transparent .8% ), radial-gradient(circle at 95% 95%,var(--color-2) .45% ,transparent .45% ), radial-gradient(circle at 94.5% 97.5%,var(--color-3) .5% ,transparent .5% ), radial-gradient(circle at 98.5% 95.5%,var(--color-4) .25%,transparent .25% ); >@media screen and (min-width: 768px) < h1 < font-size: 6.5rem; >> 

    Dynamic layout

    The dynamic layout refers to the ability of the platform to adapt its visual interface. Various properties such as constraints, flexbox, grid, and dynamic units provide a dynamic layout to a contemporary CSS design. One typical application for dynamic layout is in mobile applications, where users can move between portrait and landscape orientations. In these situations, a dynamic layout helps ensure the user interface remains functional and aesthetically appealing regardless of the device.

    In sum

    With the right implementation of CSS properties, you can create effective animations, responsive designs, and aesthetically pleasing dynamic layouts. CSS designs and their properties are an important part of web development and will continue to shape the future of web design and user experience.

    To stay ahead in this creative and logical field, it is critical to keep up with the latest developments in CSS designs. After all, it comes down to the lasting impression you leave on the user.

    Are you a developer looking for high-paying remote US software jobs? Look no further. Turing can help you land your dream software jobs with top US companies. Visit the Apply for Jobs page for more information.

    Join a network of the world’s best developers and get long-term remote software jobs with better compensation and career growth.

    Источник

    Create a Product Page with Interactive Colors in HTML, CSS3 & jQuery

    

    In this tutorial, we are going to create a website product page using HTML, CSS3 and jQuery. You can use it for product presentations on your shop website.

    

    This page can be utilized to present your products on the website for your online business, making it simpler for customers to understand what you have to offer. The webpage’s structure can be created with HTML, and it can be styled and made visually appealing with CSS3. With the help of the JavaScript library jQuery, you can make your website more interactive and animated for your visitors and provide them a more satisfying experience overall. You can make a product page that looks professional and will make your company stand out by following the instructions in this guide.

    In this tutorial, we’ll use Google Fonts, specifically Roboto. Make sure to include the typeface before you start.

    HTML

    The first step is to create an HTML structure. Here’s what we need:

    With Postcards you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.

    Two columns

    • Headphones images (**on the left**)
    • Headphones description and customization (**on the right**)
    • In this section, we’ll have more elements (**buttons, radios, links**)

    Ok, let’s wrap everything in a `.container` class.

     
     
      
      
    Headphones 
    Beats EP
     
    The preferred choice of a vast range of acclaimed DJs. Punchy, bass-focused sound and high isolation. Sturdy headband and on-ear cushions suitable for live performance
     
      
    Color 
     
    Cable configuration 
    Straight Coiled Long-coiled 
     How to configurate your headphones 
     
     
    148$  
     
     

    Now let’s go to the next step where we’ll make it look awesome.

    CSS

    Add basic styling to the body.

    /* Basic Styling */ html, body < height: 100%; width: 100%; margin: 0; font-family: 'Roboto', sans-serif; >.container

    Notice that `.container` has been set to `display: flex` which will align the columns.

    Now let’s add some width to columns and `position: relative` the `.left-column`, because we will `position: absolute` the images.

    /* Columns */ .left-column < width: 65%; position: relative; >.right-column

    Great! Let’s style the first column, which is `.left-column`. This column has three images, three headphones in different colors. We’ll give them `opacity: 0` and also add a class `.active` on them with `opacity: 1`, which we’ll need it later in this tutorial.

    With Startup App and Slides App you can build unlimited websites using the online website editor which includes ready-made designed and coded elements, templates and themes.

    /* Left Column */ .left-column img < width: 100%; position: absolute; left: 0; top: 0; opacity: 0; transition: all 0.3s ease; >.left-column img.active

    Style the `.right-colum` now. Begin with `.product-description` where we describe the product.

    /* Product Description */ .product-description < border-bottom: 1px solid #E1E8EE; margin-bottom: 20px; >.product-description span < font-size: 12px; color: #358ED7; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; >.product-description h1 < font-weight: 300; font-size: 52px; color: #43484D; letter-spacing: -2px; >.product-description p

    Now, we need to style the product color configuration.

    Here, we have three radio inputs, we’ll style them to look nice. Each input will have a color that pairs with the headphones color. We’re going to use `:checked` to add a checked icon on the checked radio input, `:checked` is an awesome feature which CSS provides.

    /* Product Color */ .product-color < margin-bottom: 30px; >.color-choose div < display: inline-block; >.color-choose input[type=&quot;radio&quot;] < display: none; >.color-choose input[type=&quot;radio&quot;] + label span < display: inline-block; width: 40px; height: 40px; margin: -1px 4px 0 0; vertical-align: middle; cursor: pointer; border-radius: 50%; >.color-choose input[type=&quot;radio&quot;] + label span < border: 2px solid #FFFFFF; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.33); >.color-choose input[type=&quot;radio&quot;]#red + label span < background-color: #C91524; >.color-choose input[type=&quot;radio&quot;]#blue + label span < background-color: #314780; >.color-choose input[type=&quot;radio&quot;]#black + label span < background-color: #323232; >.color-choose input[type=&quot;radio&quot;]:checked + label span < background-image: url(images/check-icn.svg); background-repeat: no-repeat; background-position: center; >

    Good! Now let’s style the `.cable-configuration` section. We have three buttons and a link. Let’s style their states and make them look nice.

    /* Cable Configuration */ .cable-choose < margin-bottom: 20px; >.cable-choose button < border: 2px solid #E1E8EE; border-radius: 6px; padding: 13px 20px; font-size: 14px; color: #5E6977; background-color: #fff; cursor: pointer; transition: all .5s; >.cable-choose button:hover, .cable-choose button:active, .cable-choose button:focus < border: 2px solid #86939E; outline: none; >.cable-config < border-bottom: 1px solid #E1E8EE; margin-bottom: 20px; >.cable-config a < color: #358ED7; text-decoration: none; font-size: 12px; position: relative; margin: 10px 0; display: inline-block; >.cable-config a:before

    One last thing to do is to style the last section of this column, which is `.product-price`.

    /* Product Price */ .product-price < display: flex; align-items: center; >.product-price span < font-size: 26px; font-weight: 300; color: #43474D; margin-right: 20px; >.cart-btn < display: inline-block; background-color: #7DC855; border-radius: 6px; font-size: 16px; color: #FFFFFF; text-decoration: none; padding: 12px 30px; transition: all .5s; >.cart-btn:hover

    Awesome! Here’s what we’ve accomplished so far:

    

    Let’s add responsiveness, too.

    /* Responsive */ @media (max-width: 940px) < .container < flex-direction: column; margin-top: 60px; >.left-column, .right-column < width: 100%; >.left-column img < width: 300px; right: 0; top: -65px; left: initial; >> @media (max-width: 535px) < .left-column img < width: 220px; top: -85px; >>

    JS

    The last thing we need to do is to make the images change when we click on a color, so that the checked radio input color matches with headphones color. This uses jQuery, so make sure to include it in your project. We’ll use data attributes to work with.

    Notice that we add the class `.active`. I mentioned earlier everytime we click on the matched color.

    

    Download Website Product Page

    

    Awesome! We’re done here! Feel free to use this in your projects. Take a look at the demo and let me know what you think in the comments.

    Like what you’re reading? Subscribe to our top stories.

    Raul Dronca

    I’m a Front-End Developer from Arad, Romania. I am passionate about everything related to Web Development. Huge coffee lover.

    Источник