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
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I'm trying to create a Triangle on top of a rectangle div. The triangle needs to be the width of the page and also be responsive. The upper right and left parts of the div (where no triangle exists) needs to be transparent.
I have an image of what it should look like but it's very difficult to see due to the similar dark colors. The upper right and left of the rectangle div needs to be transparent.
Does anyone know how I can recreate the highlighted rectangle in the image below?
I've been trying for hours by searching through stackoverflow and haven't been able to figure it out from other questions.
Thank you!
You can try that :
<html>
<body>
<style>
body {
margin: 0;
}
.rectangle {
width: 100%;
height: 100px;
background: #777;
}
.triangle-up {
width: 0;
height: 0;
border-left: 50vw solid transparent;
border-right: 50vw solid transparent;
border-bottom: 100px solid black;
}
</style>
<div class='rectangle'>
<div class='triangle-up'></div>
</div>
</body>
</html>
(I changed the colors to make it easier to see)
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 7 years ago.
Improve this question
I'm still newbie in html. How can I achieve this with style:
rounded border 1px color grey
icon on the left with peach background
input text on the right
The only way to achieve that as Crossbrowser solution is to use background-image with background-position and background-size
input[type=text]{
background-image: url(http://i.imgur.com/EitD5gR.png);
background-size: 16px 16px;
background-repeat: no-repeat;
background-position: left top;
border-radius: 6px;/*rounded border */
border: 1px solid grey;
padding-left: 16px
}
<input type=text />
in a near future you will be able to do that using :pseudo-element
Its better If you can provide some code but since you are a beginner hope this code helps you
<div id = 'outer'>
<div id = 'inner'>
img
</div>
</div>
CSS
#outer{
width:200px;
height:50px;
border: 2px solid gray;
position:absolute;
border-radius:10px;
}
#inner{
position:relative;
width: 20%;
height:100%;
background-color: yellow;
border-radius:2px;
z-index:-30;
}
Cick for fiddle Fiddle
Here's the basic idea:
The rounded border you'll get with the CSS property border-radius. You'll need to look this up, because not all browsers respect plain ol' border-radius - you'll end up with several css rules (e.g. border-radius:...; -webkit-border-radius:...). The border color you'll get with the css property border-color. http://www.w3schools.com/cssref/pr_border.asp (and the links in the left sidebar) is a good resource to learn about styling borders
The image inside the input is going to be kinda complicated for a newbie. There are a couple ways you could do this… I recommend using a :before "pseudoelement." You'll set the <input> (or whatever the main element you're styling here is) to let elements inside it position themselves relative to it, and then you'll set the pseudoelement to be absolutely positioned all the way on the left. The pseudoelement then gets a specific size, and you put an image into it.
Without doing too much of the work for you, the CSS will be something like
input {
border-radius: ...;
border-color: ...;
position: relative; <-- lets us position child elements relative to this one
}
input:before {
content: url(path/to/the/image);
position: absolute;
left: 0;
width: 30px; <-- I'm just guestimating that number
height: 100%; <--- depending on the rest of your css, this might need to be set in pixels
}
Other problems you might run into:
You might lose the rounded corners on the left. If so, you can round only those corners on the input:before (a tool like http://border-radius.com/ will help you round only certain corners)
If you're using an <input>, it might look wrong in some browsers. That's because browsers supply default styles for inputs. This gets into fancier stuff, so I'll give you the solution up front and you can study up to figure out what it does
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
border-repeat: repeat;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have link that I want a border around but I can't get the border to appear closer to the text. Below is the css for the element;
.signup{
border: 1px solid;
border-radius: 10px;}
which displays the border as;
If I add height: 1.2em it reduces the bottom spacing but not the top;
how do I reduce the spacing above the text?
I'm using the bootstrap flatly theme http://bootswatch.com/flatly/ the element I want the border around is 'WrapBootstrap' in the top right of the navigation bar.
You should give the border style to the <span> itself.
span{
border: 1px solid black;
border-radius: 10px;
padding: 5px 10px;
}
Editing the padding will allow you to move the border from the text.
In your case the position of the <span> and the .margin might be causing the discrepancy. Like #dfsq pointed out, there could be other factors.