FMCodes • All-in-one Webmasters community
Would you like to react to this message? Create an account in a few clicks or log in to continue.

You are not connected. Please login or register

FMCodes • All-in-one Webmasters community  » Coding Community » HTML & CSS Languages » HTML & CSS Tutorials » Creating a Shadowed Page Effect with CSS3

Creating a Shadowed Page Effect with CSS3

5 posters
Valid
Niko
  • Forum Administrator

    Team contributor
    You have been part of the community team
    Community veteran
    You belong to this community since its ancient time
    Active Contributor
    The user has wrote more than 100 posts and comments
    Passioned user
    You have participated in 50+ different topics, a true fan!
    Post lover
    You have liked more than 50 posts!
    Beta Tester
    You have been part of the Beta-Testing team
    Forumotion expert
    This user is an expert with Forumotion free forum hosting
    10th Anniversary (Grand Re-open)
    Thanks for being part of our grand re-opening
    Merry Christmas 2022
    Thanks for having been with us during Christmas season!
    Forum Writer
    You have opened more than 20 topics on the forum
    The Life of the Party
    You have made more than 20 members in our community, wow!
    Members Guru
    You have received more than 50 likes on your posts. Our members really what you have to say!
      Posts : 3614
      Points : 129487
    Creating a Shadowed Page Effect with CSS3


    Overview

    Description

    effect that simulates a shadow with a wingspan, and it's very attractive..

    Demonstration

    Creating a Shadowed Page Effect with CSS3 Scher136

    Installation

    Introduction

    The general HTML code to use will be:
    Code:
    <div class="box efeito">
     <p>Sombra</p>
    </div>

    CSS

    In order to design the style of the resource, you need to go towards Administration Control Panel (ACP) Display CSS & Colors CSS Style Sheet and add append the following code:

    You need to reply to the topic in order to see the code resources



    We work with the box-shadow property and the CSS3 transform so that our element is 'rotated' giving the impression that the shadow is 'bent' behind the element and some elements to position our element. on one side of the 'leaf', this happens because both effects have a negative rotate (-3), this was done to save CSS, if we were to make a CSS on each side, we would have an unnecessary use there..

    So for add on both sides, we use this:
    You need to reply to the topic in order to see the code resources



    Notes

    Approved byNiko
    Approved on January 30th, 2022
    Tested on Most recent browsers
    Difficulty level  / 
    Source -

    This resource belong to this community unless differently stated.
    No reproduction possible without our agreement, in accordance with article L122-1 of the CPI.



    Valid
    The Last Outlaw
    • I'm a new member


      Community newbie
      Belongs to the community for at least two years
      Forum member
      Belongs to the community of FMCodes
        Posts : 5
        Points : 21239
      You have me intrigued

      Valid
      Niko
      • Forum Administrator

        Team contributor
        You have been part of the community team
        Community veteran
        You belong to this community since its ancient time
        Active Contributor
        The user has wrote more than 100 posts and comments
        Passioned user
        You have participated in 50+ different topics, a true fan!
        Post lover
        You have liked more than 50 posts!
        Beta Tester
        You have been part of the Beta-Testing team
        Forumotion expert
        This user is an expert with Forumotion free forum hosting
        10th Anniversary (Grand Re-open)
        Thanks for being part of our grand re-opening
        Merry Christmas 2022
        Thanks for having been with us during Christmas season!
        Forum Writer
        You have opened more than 20 topics on the forum
        The Life of the Party
        You have made more than 20 members in our community, wow!
        Members Guru
        You have received more than 50 likes on your posts. Our members really what you have to say!
          Posts : 3614
          Points : 129487
        @The Last Outlaw Lots of new tutorials coming soon Hehe Hehe

        Grand re-opening in a few days, keep the secret (or maybe don't) nonIo



        Valid
        Nova


        • Community newbie
          Belongs to the community for at least two years
          Forum member
          Belongs to the community of FMCodes
            Posts : 12
            Points : 20550
          This sort of effect is even more better if you have twitter like site and viewing one single message. In that context such effects make that text look cool.

          Valid
          sivastar


          • Community veteran
            You belong to this community since its ancient time
            Active poster
            The user has wrote more than 50 posts
            Passioned user
            You have participated in 50+ different topics, a true fan!
              Posts : 65
              Points : 93299
            Nice, thank you

            Valid
            YoshiGM
            • Forum Administrator

              Community veteran
              You belong to this community since its ancient time
              Active Contributor
              The user has wrote more than 100 posts and comments
              Passioned user
              You have participated in 50+ different topics, a true fan!
              Team contributor
              You have been part of the community team
              Forumotion expert
              This user is an expert with Forumotion free forum hosting
              10th Anniversary (Grand Re-open)
              Thanks for being part of our grand re-opening
              Friendly user
              You have added many community members as friends!
              Beta Tester
              You have been part of the Beta-Testing team
              Merry Christmas 2022
              Thanks for having been with us during Christmas season!
              Forum Writer
              You have opened more than 20 topics on the forum
              Members Guru
              You have received more than 50 likes on your posts. Our members really what you have to say!
              Post lover
              You have liked more than 50 posts!
              Forum Partner
              This member is founder of a community affiliated with FMCodes!
                Posts : 595
                Points : 99312
              Nice trick Niko ^^




              Creating a Shadowed Page Effect with CSS3 Yoshig10

              Hey Guest, Welcome to FMCodes.  Hello
              Don't forget to read the General Rules
              • Want to improve your forum? Take a look of the Coding Community section.
              • Need any new design, promote your forum or any related? You can use our Forum Services

              Helping those who need it is not only part of duty, but of happiness.

              No Support via PM!

              Topic Actions

              Sponsored




              FMCodes • All-in-one Webmasters community  » Coding Community » HTML & CSS Languages » HTML & CSS Tutorials » Creating a Shadowed Page Effect with CSS3

              ©phpBB | Contact | Report an abuse | Cookies