Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I am currently designing an android phonegap application and i need help trying to recreate the triangles with a Box-shadow of some sort but the box shadow will only show as a square and not a triangle. When i tried searching for an answer, i could only find one for equilateral triangles or only on two sides, not the longest side.
The Design (Hidden some parts):
https://i.stack.imgur.com/ysopX.png
Edit:
Pastebin Link for current prototype (Currently not responsive - designed for 1080px by 1920px):
pastebin.com/GmYh9d9F
What you need is the drop-shadow filter:
.test {
width: 0;
height: 0;
border-style: solid;
border-width: 0 100px 100px 100px;
border-color: transparent transparent #007bff transparent;
filter: drop-shadow(0 0 4px #555);
}
<div class="test"></div>
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I know the title wasn't the best way to describe it. But I am trying to recreate the symbols shown in the image on both sides of the word interval. I have no idea how to do this. Is it a symbol? Or some kind of graphic using svg?
Here is my solution,
You can use border-width to create that shape
To create the first L shape, make top and left border-width 2px.
Similarly for 2nd L shape make border-width of top and right 2px;
span:after,span:before{
content: "";
width: 41px;
height: 6px;
display: inline-block;
margin:3px;
vertical-align: bottom;
border:1px solid grey;
}
span:after{
border-width:2px 2px 0 0; /*top right bottom left*/
}
span:before{
border-width:2px 0 0 2px;
}
<span>Interval</span>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I have been working on a project that contains some button in the same way the Google plus buttons work, I want to style them in the same way, one gradient to all of them,
please help me.
Check the buttons.
https://plus.google.com/discover/
https://i.stack.imgur.com/q8MXJ.jpg
I'm not sure how google do it, but I would use a fixed gradient background.
background: linear-gradient(-90deg, red, yellow); add a standard gradient background to the buttons going from a red to yellow, you can use any colors you like.
background-attachment: fixed; fix the background in place so it's in the same place for all divs.
This will work for buttons that are all different lengths, but for the example I use a fixed length.
.button {
float: left;
background: linear-gradient(-90deg, red, yellow);
background-attachment: fixed;
width: 150px;
height: 50px;
margin-right: 20px;
border-radius: 25px;
}
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
To reach this effect you have to use css gradients.
You do not have some code we could show you on so read more about here: https://www.w3schools.com/css/css3_gradients.asp
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I am trying to make this todolist on my own https://www.w3schools.com/howto/howto_js_todolist.asp
But this piece of css code:
/* Add a "checked" mark when clicked on */
ul li.checked::before {
content: '';
position: absolute;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
top: 10px;
left: 16px;
transform: rotate(45deg);
height: 15px;
width: 7px;
}
adds a check before the list, how does it put the check mark before the list?
The "check" is just the border of an empty box given a specific size, then rotated. The ::before pseudo element goes at the beginning of the content, the width and height form a rectangle, the border puts lines on two of the four edges, then the transform rotates it so the border looks like a check. Kinda a roundabout way of doing it. They could have also just used `content: 'some checkbox char'``.
If you change the border-width or transform things, you'll see what I mean.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
Button
How can I make this shaped button? I can use right side with "border-radius", but I have no clue how to implement left side.
You can use the CSS pseudo-selector ::before to accomplish this.
Select the element like so, and add the following styles:
.button::before {
content: "";
width: //whatever you choose to fit
height: //whatever you choose to fit
background-color: #fff !important;
//this will hide the border of the element itself
border-radius: //same radius as the element
z-index: 9999; //hides the button border
border-right: //same width as the element, solid black
border-left: 0px; //so it doesnt show
border-bottom: 0px;
border-top: 0px;
}
Lastly is the positioning, I'm trusting that you will figure out how to position it correctly. Let me know if this works. It's basically a circle with only the right border showing, sitting over the button element.
A pure CSS solution consists of adding a circular "gradient" background image on top of the normal background image: HTML
.round {
background:
radial-gradient(circle at 0 50%, rgba(204,0,0,0) 30px, #c00 15px);
border-top-right-radius:3em;
border-bottom-right-radius:3em;
}
<div class="round">By using radial gradients, you can simulate rounded corners with a negative radius. Just in this case, don't put the color stops at the exact same position, since the result will be too aliased in most browsers (and kinda still is in Webkit).</div>
Fiddle
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I want to make a div like the one in screen shot I have attached.
It opens when we click on Apps and closed when click on any where else on the page. Especially the part outlined in green and gray.
I have no idea how to do it.
Thanks in advance.
You should elaborate what you want? Do you want a popup or an arrow like one shown in the screenshot?
Try this: http://jsfiddle.net/F47uy/
CSS:
#arrow{
border-left: 15px dashed transparent;
border-right: 15px dashed transparent;
border-bottom: 15px dashed grey;
margin-left:200px;
width:0;
height:0;
}
#box{
background:grey;
width:300px;
height:300px;
}