- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
-
AuthorPosts
-
December 8, 2023 at 6:20 am #8963David HoangKeymaster
I’m a newbie in CSS and a new user of stack overflow. I want to design a message-box (speech-bubble), as in the [Design I was given] (https://i.stack.imgur.com/moRgV.jpg):
So I copied a code from the internet that draw something similar, here is the resulting output of my code:
This is my code:
* { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; position: relative; background-image: url('images/bg-mobile.png'); background-repeat: no-repeat; background-size: cover; font-family: 'Raleway', sans-serif; } .container { position: absolute; top: 40%; left: 40%; transform: translate(-40%, -40%); display: flex; flex-direction: column; align-items: center; justify-content: center; } .fylo { display: flex; flex-direction: column; gap: 1.7em; width: 320px; background: hsl(228, 56%, 26%); padding: 2em 3.6em 2.6em 2em; margin: 0.5em; border-radius: 0.7em; border-top-right-radius: 7em; } .fylo .second-layer { display: flex; flex-direction: row; gap: 0.9em; } .second-layer div { width: 30px; height: 30px; padding: 1.36em; background-color: hsl(229, 57%, 11%); display: flex; align-items: center; justify-content: center; border-radius: 6px; } .flex-container { width: 320px; background: hsl(228, 56%, 26%); padding: 2em 1.5em 3em; border-radius: 0.7em; display: flex; flex-direction: column; color: hsl(0, 0%, 100%, .7) } .flex-container p { margin-bottom: 0.1em; text-align: center } .inner-flex { display: flex; margin-top: 0.65em; font-size: 0.77rem; font-weight: 600; } .inner-flex span:nth-child(2) { margin-left: auto; } progress { -webkit-appearance: none; -moz-appeareance: none; appearance: none; width: 100%; margin-top: 1em; } /*For webkit browsers like chrome I have to include the following pseudoelements.The third one is not useful here*/ /*The indicator*/ ::-webkit-progress-value { background: linear-gradient(hsl(6, 100%, 80%), hsl(335, 100%, 65%)); border-radius: 20px; position: relative; overflow: hidden; } ::-webkit-progress-value::after { content: ""; position: absolute; width: 20px; height: 20px; background: yellow; border-radius: 50%; top: 50px; right: 20px; transform: translateX(50%, -50%); z-index: -1; } /*The Bar*/ ::-webkit-progress-bar { background: hsla(229, 57%, 11%, 0.5); border-radius: 20px; height: 17px; border: 2px solid hsla(229, 57%, 11%, 0.5); } /*for moz browsers like Firefox,I have to use the only existing pseudoelement(one) for appearance property for it and style it the sam as i styled ::-webkit-progress-value,I could have used comma to separate the selectors but we are dealing with experimental properties and we have non-stadard behaviour */ ::-moz-progress-bar { background: linear-gradient(hsl(6, 100%, 80%), hsl(335, 100%, 65%)); border-radius: 20px; } /*End of experimental declarations*/ .left-storage { width: 175px; height: 75px; background: hsl(0, 0%, 100%); border-radius: 0.6em; margin-top: -2.35em; } .left-storage { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px; } .left-storage>span:nth-child(1) { font-weight: 700; font-size: 2.5rem; opacity: 0.9; } .left-storage>span:nth-child(2) { text-transform: uppercase; font-weight: 600; font-size: 0.8rem; color: hsla(229, 7%, 55%, .8); } @media (min-width: 955px) { .container { flex-direction: row; } .flex-container { margin-top: calc(188.333px - 125.6px); margin-left: 0.5em; width: 400px; padding: 1.5em; } .left-storage { width: 120px; height: 80px; background: hsl(0, 0%, 100%); position: relative; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } .left-storage::before { content: ""; position: absolute; right: 100%; top: 26px; width: 0; height: 0; border-top: 13px solid transparent; border-right: 26px solid white; border-bottom: 13px solid transparent; } }
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap" rel="stylesheet"> <!--End of google fonts--> <main class="container"> <div class="fylo"> <div class="top-layer"> <image src="images/logo.svg" alt="fylo logo" /> </div> <div class="second-layer"> <div> <image src="images/icon-document.svg"> </div> <div> <image src="images/icon-folder.svg"> </div> <div> <image src="images/icon-upload.svg"> </div> </div> </div> <div class="flex-container"> <p>You've used <span>815GB</span> of your storage</p> <progress value="70" max="100"></progress> <div class="inner-flex"> <span>0 GB</span> <span>1000 GB</span> </div> </div> <div class="left-storage"><span>185</span><span>GB left</span></div> </main>
What I want to achieve is that the tail of the message-box (i.e
.left-storage
in the css) to be positioned as it is in the design. I want to understand how to do this.I also want know how to make the small white circle appear at the end of progress-value (that loading thing) with css.
December 8, 2023 at 6:35 am #8964David HoangKeymasterUpdate your HTML and CSS by this one and try, this might be you needing
* { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; position: relative; background-image: url('images/bg-mobile.png'); background-repeat: no-repeat; background-size: cover; font-family: 'Raleway', sans-serif; } .container { position: absolute; top: 40%; left: 40%; transform: translate(-40%,-40%); display: flex; flex-direction: column; align-items: center; justify-content: center; } .fylo { display: flex; flex-direction: column; gap: 1.7em; width: 320px; background: hsl(228, 56%, 26%); padding: 2em 3.6em 2.6em 2em; margin: 0.5em; border-radius: 0.7em; border-top-right-radius: 7em; } .fylo .second-layer{ display: flex; flex-direction: row; gap: 0.9em; } .second-layer div { width: 30px; height: 30px; padding: 1.36em; background-color: hsl(229, 57%, 11%); display: flex; align-items: center; justify-content: center; border-radius: 6px; } .flex-container { width: 320px; background: hsl(228, 56%, 26%); padding: 2em 1.5em 3em; border-radius: 0.7em; display: flex; flex-direction: column; color: hsl(0,0%, 100%,.7); position: relative; } .flex-container p { margin-bottom: 0.1em; text-align: center } .inner-flex { display: flex; margin-top: 0.65em; font-size: 0.77rem; font-weight: 600; } .inner-flex span:nth-child(2) { margin-left: auto; } progress { -webkit-appearance: none; -moz-appeareance: none; appearance: none; width: 100%; margin-top: 1em; } /*For webkit browsers like chrome I have to include the following pseudoelements.The third one is not useful here*/ /*The indicator*/ ::-webkit-progress-value { background: linear-gradient(hsl(6, 100%, 80%),hsl(335, 100%, 65%)); border-radius: 20px; position: relative; overflow: hidden; } ::-webkit-progress-value::after { content: ""; position: absolute; width: 20px; height: 20px; background: yellow; border-radius: 50%; top: 50px; right: 20px; transform: translateX(50%, -50%); z-index: -1; } /*The Bar*/ ::-webkit-progress-bar { background: hsla(229, 57%, 11%,0.5); border-radius: 20px; height: 17px; border: 2px solid hsla(229, 57%, 11%,0.5); } /*for moz browsers like Firefox,I have to use the only existing pseudoelement(one) for appearance property for it and style it the sam as i styled ::-webkit-progress-value,I could have used comma to separate the selectors but we are dealing with experimental properties and we have non-stadard behaviour */ ::-moz-progress-bar { background: linear-gradient(hsl(6, 100%, 80%),hsl(335, 100%, 65%)); border-radius: 20px; } /*End of experimental declarations*/ .left-storage { width: 175px; height: 75px; background: hsl(0,0%, 100%); border-radius: 0.6em; margin-top: -2.35em; } .left-storage { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px; position: absolute!important; right: 1.5rem; top: -20px; } .left-storage > span:nth-child(1) { font-weight: 700; font-size: 2.5rem; opacity: 0.9; color: #000; } .left-storage > span:nth-child(2) { text-transform: uppercase; font-weight: 600; font-size: 0.8rem; color: hsla(229, 7%, 55%, .8); } @media (min-width: 955px) { .container { flex-direction: row; } .flex-container { margin-top: calc(188.333px - 125.6px); margin-left: 0.5em; width: 400px; padding: 1.5em; } .left-storage { background: hsl(0,0%, 100%); position: relative; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } .left-storage::before { content: ""; position: absolute; right: 0; bottom: -20px; width: 0; height: 0; border-top: 33px solid transparent; border-right: 26px solid white; border-bottom: 23px solid transparent; } }
<main class="container"> <div class="fylo"> <div class = "top-layer"> <image src="images/logo.svg" alt="fylo logo"> </div> <div class="second-layer"> <div><image src="images/icon-document.svg"></div> <div><image src="images/icon-folder.svg"></div> <div><image src="images/icon-upload.svg"></div> </div> </div> <div class="flex-container"> <p>You've used <span>815GB</span> of your storage</p> <progress value="70" max="100"></progress> <div class="inner-flex"> <span>0 GB</span> <span>1000 GB</span> </div> <div class="left-storage"><span>185</span><span>GB left</span></div> </div> </main>
December 8, 2023 at 6:45 am #8965David HoangKeymasterI have solved the problem, please use the below CSS code:
* { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; position: relative; background-image: url('images/bg-mobile.png'); background-repeat: no-repeat; background-size: cover; font-family: 'Raleway', sans-serif; } .container { position: absolute; top: 40%; left: 40%; transform: translate(-40%,-40%); display: flex; flex-direction: column; align-items: center; justify-content: center; } .fylo { display: flex; flex-direction: column; gap: 1.7em; width: 320px; background: hsl(228, 56%, 26%); padding: 2em 3.6em 2.6em 2em; margin: 0.5em; border-radius: 0.7em; border-top-right-radius: 7em; } .fylo .second-layer{ display: flex; flex-direction: row; gap: 0.9em; } .second-layer div { width: 30px; height: 30px; padding: 1.36em; background-color: hsl(229, 57%, 11%); display: flex; align-items: center; justify-content: center; border-radius: 6px; } .flex-container { width: 320px; background: hsl(228, 56%, 26%); padding: 2em 1.5em 3em; border-radius: 0.7em; display: flex; flex-direction: column; color:hsl(0,0%, 100%,.7) } .flex-container p { margin-bottom: 0.1em; text-align: center } .inner-flex { display: flex; margin-top: 0.65em; font-size: 0.77rem; font-weight: 600; } .inner-flex span:nth-child(2) { margin-left: auto; } progress { -webkit-appearance: none; -moz-appeareance: none; appearance: none; width: 100%; margin-top: 1em; } /*For webkit browsers like chrome I have to include the following pseudoelements.The third one is not useful here*/ /*The indicator*/ ::-webkit-progress-value { background: linear-gradient(hsl(6, 100%, 80%),hsl(335, 100%, 65%)); border-radius: 20px; position: relative; overflow: hidden; } ::-webkit-progress-value::after { content: ""; position: absolute; width: 20px; height: 20px; background: yellow; border-radius: 50%; top: 50px; right: 20px; transform: translateX(50%, -50%); z-index: -1; } /*The Bar*/ ::-webkit-progress-bar { background: hsla(229, 57%, 11%,0.5); border-radius: 20px; height: 17px; border: 2px solid hsla(229, 57%, 11%,0.5); } /*for moz browsers like Firefox,I have to use the only existing pseudoelement(one) for appearance property for it and style it the sam as i styled ::-webkit-progress-value,I could have used comma to separate the selectors but we are dealing with experimental properties and we have non-stadard behaviour */ ::-moz-progress-bar { background: linear-gradient(hsl(6, 100%, 80%),hsl(335, 100%, 65%)); border-radius: 20px; } /*End of experimental declarations*/ .left-storage { width: auto; height: 72px; background: hsl(0,0%, 100%); border-radius: 0.6em; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px; } .left-storage > span:nth-child(1) { font-weight: 700; font-size: 2.5rem; opacity: 0.9; } .left-storage > span:nth-child(2) { text-transform: uppercase; font-weight: 600; font-size: 0.8rem; color: hsla(229, 7%, 55%, .8); white-space: nowrap; } @media (min-width: 955px) { .container { flex-direction: row; } .flex-container { margin-top: calc(188.333px - 125.6px); margin-left: 0.5em; width: 400px; padding: 1.5em; } .left-storage { width: auto; height: 72px; background: hsl(0,0%, 100%); position: absolute; border-radius: 10px; top: 0; right: 20px; padding: 0 25px; } .left-storage::before { content: ""; position: absolute; right: 0; top: 58px; width: 0; height: 0; border-top: 0 solid transparent; border-right: 35px solid white; border-bottom: 36px solid transparent; } }
-
AuthorPosts
Viewing 3 posts - 1 through 3 (of 3 total)
- You must be logged in to reply to this topic.