4
\$\begingroup\$

I believe I'm writing in the correct place. However, I'm not fully sure, and I am relatively new to Stack Exchange. If it is not, and can be moved by an admin/moderator in the correct place, please do so. Or else let me know where and why, and I'll fix it.

PS: Sorry for any grammar mistakes. I'm a dad of a newborn. So my time is all over the place.

Since I'm an amateur programmer, learning MEAN stack by my self, I've concluded that the best way to exercise vanilla CSS is by cloning stuff on Pinterest. Bare in mind that this is my first true exercise (actually a problem, not exercise, since I had to wrap my hand around it, not just practice).

About 2 weeks ago I started to clone the image linked below. I've done that whenever a I had some spare time, either if I had a PC at hand, or just doing it on my phone or tablet.

Although I haven't managed to clone it 100%, I'd say it's at least 95% successfully. What I'd love and appreciate are reviews for my efort as well as advices for future implementations of methodology and techniques.

I don't have a specific question, as I'm sure anything from within my code could have been done better, so feel free to jump on anything.

However, I've like to point out a few difficulties I had:

  • The "pillars" of light have been a particular pain. It took me at least 50% of the time invested. That is because, as you can see, the margins of the pillars have a specific shape that widens at the ends. I've tried SVG, but learned that I had to drop shadows in HTML for them, as the box-shadow property or drop-shadow filter do not work on SVGs. I've tried the html code for SVG shadows, but gave up on it since I decided I should use the div box-shadow split between more parts (up, mid and down parts). Then I had issues with the shadows spaning on the other parts, but fixed them with propper x-y positioning.
  • The "item" circular shape was a problem as well. I've tried linear gradient border with another specific shaped div, but the transition between the 2 were rough. So I've ended up using only 1 shaped din, but with 2 radial gradients. I know there should be more work on the orange gradient, since is not that luminous as in the pinterest image, but I'm out of options.

Exercise source: https://ro.pinterest.com/pin/784470828832524047/

Resulted code: https://jsitor.com/i5iAlhRIC

HTML:

<head>
    <title>ABE1</title>
<body>

    <article id="bgSpace">

        <div class="overlay"></div>
        <section id="bgGround" class="bgSpace__member ground">
            <div class="bgMember__ground__texture">
      <div class="pin"></div>
            </div>
        </section>

        <section id="bgFloor" class="bgSpace__member floor">
            <div class="bgMember__floor__left">
                <div class="delimiter_left"></div>
      <div class="pillars"></div>
                <div class="dip ld">
        <div class="liner liner_left">
          <div class="liner-up left"></div>
          <div class="liner-mid left"></div>
          <div class="liner-down left"></div>
        </div>
        <div class="liner liner_right">
          <div class="liner-up right"></div>
          <div class="liner-mid right"></div>
          <div class="liner-down right"></div>
        </div>
                </div>
            </div>
            <div class="bgMember__floor__right">
                <div class="delimiter_right"></div>
                <div class="pillars"></div>
      <div class="dip rd">
        <div class="liner liner_left">
          <div class="liner-up left"></div>
          <div class="liner-mid left"></div>
          <div class="liner-down left"></div>
        </div>
        <div class="liner liner_right">
          <div class="liner-up right"></div>
          <div class="liner-mid right"></div>
          <div class="liner-down right"></div>
        </div>
                </div>
            </div>
        </section>

        <section id="bgItem" class="bgSpace__member item">
            <div class="bgMember__item__field"></div>
        </section>

    </article>

</body>

CSS:

body {
  margin: 0;
    box-sizing: border-box;
    width: 100vw;
    height: calc(100vw * 1.65);
    --pillar_color_line: rgba(255, 140, 0, 1);
  --pillar_color_rod: rgba(255, 165, 0, 1);
    --pillar_color_ray: rgba(255,140,0,1);
  --dip_rays: rgba(255,110,0,1);
  --pillars_position: 20%;
    --viewport: 100vw;
  --pillars__effect_size_ref: calc(var(--viewport) * 0.33 / 71.28);
  --refwidth: var(--pillars__effect_size_ref);
  --bg_color: rgba(73,73,73, 1);
}

/* Used for overall vignete effect */
.overlay {
    width: 100%;
    height: 100%;
    z-index: 2;
    position: absolute;
    top: 0;
    background-image: radial-gradient(circle closest-corner at center, rgba(255,255,255,0) 70%, rgba(0,0,0,1) 100%);
}
/*_______*/

/* Everything is split in 3 major layers:
    - First is the #bgGround, the most basal, as the name suggests;
    - Second is the #bgFloor, and consists of the 2 rectangles of 90% height on each side of the bg;
          - the light Pillars ar in it, with relative-absolute positioning
    - Third is the bgItem, and is the circular shape at the center of it.
          - this was second in effort after the pillars, since I had to learn the hard way how to use radial gradient borders. Had 2 circular "items" for that. But ended up with 1 item with 2 bg-image properties due to technical limitations in the radial border technique. 
*/

/* Overal measurements of the bg - bgSpace */
#bgSpace {
  margin: 0;
    width: 100vw;
  height: calc(100vw * 1.65);
    position: relative;
}
/*___*/


/* 1st layer - bgGround */
.bgMember__ground__texture {
    position: absolute;
  margin: 0;
  height: 100%;
  width: 100%;
  background-image: radial-gradient(ellipse farthest-corner at center, rgba(73,73,73,1) 0%, rgba(0,0,0,1) 100%);
}

.pin {
  width: 0%;
  height: 50%;
  z-index: 0;
    position: absolute;
  top: 26%;
  left: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  box-shadow: 0 0 
    calc(var(--refwidth) * 50)  
    calc(var(--refwidth) * 40) 
    black;
}
/*___*/

/* 2nd layer - bgFloor, with pillars */
.bgMember__floor__left {
    position: absolute;
    left: 0;
    width: 33%;
    height: 90%;
    margin-top: calc(10% - 5px);
  box-shadow: calc(var(--refwidth) * 30) 0 calc(var(--refwidth) * 35) calc(0px - var(--refwidth) * 20);
}

.delimiter_left, .delimiter_right {
    position: absolute;
    right: 0;
    width: 5px;
    height: 100%;
    background-color: var(--bg_color);
    border-radius: 100% 100%;
}

.delimiter_right {
    left: 0;
}

.bgMember__floor__right {
    position: absolute;
    right: 0;
    height: 90%;
    width: 33%;
    margin-top: calc(10% - 5px);
  box-shadow: calc(0px - var(--refwidth) * 30) 0 calc(var(--refwidth) * 35) calc(0px - var(--refwidth) * 20);
}

/* Pillars */
/* - Pillar Lighting-Shadows Layout */
.bgMember__floor__left > .pillars{
right: var(--pillars_position);
}
.bgMember__floor__right > .pillars{
left: var(--pillars_position);
}

.pillars {
    position: absolute;
    height: 100%;
    width: calc(var(--refwidth) * 2);
    box-shadow: 
        inset
    0 0 calc(var(--refwidth) * 5) 
      calc(var(--refwidth) * 2) 
      var(--pillar_color_rod), 
    0 0 calc(var(--refwidth) * 3) 
      calc(var(--refwidth) * 2) 
      var(--pillar_color_rod), 
    0 0 calc(var(--refwidth) * 2) 
      calc(var(--refwidth) * 1) 
      var(--pillar_color_rod);
    border-radius: 50% 50%;
    filter: drop-shadow(0px 0px calc(var(--pillars__effect_size_ref) * 3) var(--pillar_color_line));
}

.dip {
width: 43%;
right: 0;
height: 100%;
overflow: hidden;
}

.ld{
    position: absolute;
    right: 0;
    height: 100%;
}

.rd {
    position: absolute;
    left: 0;
    height: 100%;
}
/*_____*/

/* Liners - the transparent shapes required for the rays inside the pillars */
/* Liner Shadows */
.liner-up.left, .liner-mid.left, .liner-down.left {
  box-shadow: calc(var(--refwidth) * 6)
        0px 
        calc(var(--refwidth) * 6) 
        var(--dip_rays);
  overflow: hidden;
}

.liner-up.right, .liner-mid.right, .liner-down.right {
  box-shadow: calc(0px - var(--refwidth) * 6) 
    0px 
    calc(var(--refwidth) * 6) 
    var(--dip_rays);
  overflow: hidden;
}
/*___*/

/* Liners - General */
.liner {
  width: 50%;
  height: 100%;
}

.liner-up {
  width: 10%;
  height: 20%;
}

.liner-mid {
  top: 20%;
  width: 10%;
  height: 60%;
}

.liner-down {
  top: 80%;
  width: 10%;
  height: 20%;
}
/*___*/

/* Liner - Left */
.liner-left {
  position: absolute;
  left: 0;
}

.liner-up.left {
  position: absolute;
  left: 0;
  border-radius: 0 100% 0 0;
}

.liner-mid.left {
  position: absolute;
  left: 0;
}

.liner-down.left {
  position: absolute;
  left: 0;
  border-radius: 0 0 100% 0;
}
/*___*/

/* Liner - Right */
.liner-right {
  position: absolute;
  right: 0;
}

.liner-up.right {
  position: absolute;
  right: calc(0px - var(--refwidth) * 0);
  top: 0;
  border-radius: 100% 0 0 0;
}

.liner-mid.right {
  position: absolute;
  right: 0;
}

.liner-down.right {
  position: absolute;
  right: 0;
  border-radius: 0 0 0 100%;
}
/*___*/
/*_____*/
/*_______*/
/*_________*/

/* 3rd layer - bgItem */
.item {
  height: 100%;
    position: relative;
  z-index: initial;
}

.bgMember__item__field {
    height: auto;
    width: 80%;
  left: 10%;
  top: 25%;
  position: absolute;
    padding-top: 80%;
  border-radius: 50%;
  z-index: 3;
  background-image: radial-gradient(100% 95% at center, rgba(0,0,0,0) 51%, rgba(255,170,0,1) 52.5%), 
        radial-gradient(100% 90% at left, rgba(73,73,73, 1) 0%, rgba(0,0,0, 1) 95%);
  box-shadow: calc(0px - var(--refwidth) * 8) 0 calc(var(--refwidth) * 10) calc(var(--refwidth) * 0);
}
```
\$\endgroup\$
0
\$\begingroup\$

First
You need beautify your html and css code, you can do this manually, or use extensions of vscode like: Beautify from HookyQR.
This is link of HookyQR

second
Bro, in your css code, it is better that you follow the law of parenthood and child and write as father and child in your css.
for example for one of them i can write for you:

#bgSpace .bgSpace__member item .bgMember__item__field {
    height: auto;
    width: 80%;
  left: 10%;
  top: 25%;
  position: absolute;
    padding-top: 80%;
  border-radius: 50%;
  z-index: 3;
  background-image: radial-gradient(100% 95% at center, rgba(0,0,0,0) 51%, rgba(255,170,0,1) 52.5%), 
        radial-gradient(100% 90% at left, rgba(73,73,73, 1) 0%, rgba(0,0,0, 1) 95%);
  box-shadow: calc(0px - var(--refwidth) * 8) 0 calc(var(--refwidth) * 10) calc(var(--refwidth) * 0);
}

You should write all of your css like above.

Important note

If you want use id and class or css selector together in your code, you have to learn about cascade and inheritance in css, or you will run into cascade and inheritance problems, because you did not read about them but used them.
This is link of cascade and inheritanc

| improve this answer | |
\$\endgroup\$
  • \$\begingroup\$ Your second suggestion is in direct violation of BEM, which protoCoding is obviously implementing. \$\endgroup\$ – bleistift2 Sep 13 at 13:02
  • \$\begingroup\$ Not exactly, but yes, I talked about the structure and architecture of CSS, but very basic \$\endgroup\$ – Mehrdad Kiani Anbohi Sep 15 at 12:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.