I'm in somewhat of a situation as I need to make minor CSS adjustments but do not have permission to touch the graphics.
In this case, i have a background image (that has a width of 461px in Photoshop) and I need to extend it 4-5 pixels.
The current for CSS for this image is:
#screenvolumeslidermenu{
background:url(../html_cmi/lopa/volume_bg_overlay.png) no-repeat;
background-size:100%;
width:461px;
height:51px;
position:fixed;
z-index:15;
top:678px;
left:70px;
display:none;
}
It didn't initially have the no-repeat property, but if I take that out and just increase the current width, the image will start to repeat. If I leave it in as is and increase the width, no visible change is made but using inspect element the width is technically increasing. See here:
I want the right side of the black rectangle to extend a few more pixels on the right side.
I tried using background-size but couldn't get any decent results.
What is the best solution here to extend the image width without touching it in Photoshop?
In your situation. The ideal method would be to create the whole thing using CSS. Create the main rectangle and use :before and :after to create the arrow with border styles. Check this site out
.arrow_box {
position: relative;
background: #88b7d5;
border: 4px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-right-color: #88b7d5;
border-width: 30px;
margin-top: -30px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-right-color: #c2e1f5;
border-width: 36px;
margin-top: -36px;
}
1) background-size can accept two values, for example
background-size: 200% 100%;
should let you stretch only one dimension (can use pixels too).
2) if you don't want to touch proportions, consider creating another, narrower element that has the same background image, but aligned to the right edge, and place it over the first element, aligned to the right. Then by moving the right piece like a slide ruler, you'll be able to vary overall width without distorting your graphics.
Related
So I am trying to create scooped corner (on bottom-right only) with border around the complete structure. Please refer image below.
Check image here
I have seen many examples on how to create scooped corners on all the 4 sides and creating scooped corner on one side only. But not able to find anything this specific use case.
I am a beginner in CSS. So my question could be pretty noob also.
Thanks in advance.
As this scoop is just for visual effect rather than having any semantics attached, one way of doing this using simple CSS is to use a pseudo element to create it, have that sitting over the actual element and with a background color so it overwrites the borders at the bottom.
To make this general you can introduce CSS variables to set size and positioning in proportion but just to get you started here is an example using vmin as the unit of size:
body {
background-color: black;
}
div {
width: 90vmin;
height: 90vmin;
position: relative;
border: solid 3px lime;
border-radius: 10vmin;
background-color: gray;
}
div::after {
content: '';
position: absolute;
width: 40%;
height: 40%;
border-color: transparent transparent transparent lime;
border-width: 3px;
border-style: solid;
top: 80%;
left: 80%;
border-radius: 50%;
transform: rotate(45deg);
background-color: black;
}
<div></div>
So I have been slamming my head against the wall trying several different methods online and can't get anything to work.
I have a div that needs to be fluid width, and its height needs to be variable as well.
The div sits on top of a tile-able background image. It has a 1px border around it.
I need the bottom right of the div to fold up, like a piece of paper.
I tried using an image, in a div anchored to the bottom. But that requires a fixed width or height as far as I can tell.
I tried this method but it requires a solid background color. I have a repeating image.
I tried this method, which uses gradients to control the opacity at the corner, this almost works, but my div requires a border. Applying the border ruins the effect.
background:
linear-gradient(45deg, rgba(255,0,0,0.4), rgba(255,0,0,0.4)),
linear-gradient(135deg, rgba(255,0,0,0.4), rgba(255,0,0,0.4)),
linear-gradient(225deg, transparent 10px, rgba(255,0,0,0.4)
background-size: 14px 14px, 50% 100%, 50% 50%, 50% 50%;
background-position: 100% 0, 0 0, 100% 100%, 100% 0;
background-repeat: no-repeat;
//then an :after pseudo class to create the corner fold
Any help would be greatly appreciated. Thanks.
This question got me bussy for some time, this seems to be a really hard thing to do with CSS only. I managed to achieve the effect(the paper flip with a border around the element) you wanted, but it requires alot of CSS and I don't know how far you want to go. I applied border-radius to the top right corner and used a triangle to overlap the border-radius. This did not cover the entire border radius, so I used a span to form 2 shapes to overlay the remaining gap.
Look at this fiddle for the result, any improvements are welcome
http://jsfiddle.net/EnVnW/
CODE:
body {
background: #444 url('http://leaverou.me/ft2010/img/darker_wood.jpg') bottom;
}
.arrow_box {
color:red;
position: relative;
background: #88b7d5;
border: 4px solid #c2e1f5;
height:400px;
border-radius:0 300px 0 0; /* here we give the box a round corner on the top right side */
}
.arrow_box:after, .arrow_box:before { /* we create 2 triangles in the top right corner, one for the border and one for the filling */
-ms-transform:rotate(-135deg); /* rotate to make the triangle have the right angle */
-webkit-transform:rotate(-135deg);
transform:rotate(-135deg);
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
top:42px;
right:-20px;
}
/* here we position the triangles in the top right corner */
.arrow_box:after {
border-color: rgba(200, 265, 0, 0);
border-bottom-color: #00b7d5;
border-width: 100px;
left: 100%;
margin-left: -240px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #c2e1f5;
border-width: 105px;
left: 100%;
top:39px;
margin-left: -245px;
}
/* we still have a massive gap next to the triangle, so we fill it up with 2 rectangles. One on the left side of the triangle and one on the bottom side of the triangle, we also will give them a border to finish the line around the element */
.arrow_box span {
border-top: 4px solid #c2e1f5;
position:absolute;
width:150px;
height:140px;
background-color:black;
right:140px;
top:-4px;
background: #88b7d5;
}
.arrow_box span:after {
border-right: 4px solid #c2e1f5;
content: "";
position:absolute;
width:150px;
height:150px;
background: #88b7d5;
left:140px;
top:140px;
}
With CSS4 this will be alot easier to do, here you can read about it;
http://dev.w3.org/csswg/css-backgrounds-4/#border-corner-shape
Im looking for a way to recreate this button with CSS only.
I know about the triangle technique and I also know how to add a border to it, but unfortunately I don't know any way to recreate this button (without adding additional wrappers or using images).
The buttons I need this style on are <input["submit"]> and ordinary <a>'s.
With one element, you could do it using gradients and skewed pseudo-elements for a link:
demo
(you could actually do it using just gradients, but then a hover action won't be triggered on hover on the arrow shape itself, but on hover on the rectangular element containing it)
HTML:
<a class='boo' href='#'>click me</a>
Relevant CSS:
.boo {
display: inline-block;
position: relative;
padding: .5em 2em;
background:
linear-gradient(60deg, dodgerblue 50%, transparent 50%) 100% 0,
linear-gradient(-60deg, transparent 50%, dodgerblue 50%) 100% 100%,
linear-gradient(-90deg, transparent 1em, dodgerblue 1em);
background-repeat: no-repeat;
background-size: 1em 50%, 1em 50%, 100% 100%;
}
.boo:before, .boo:after {
position: absolute;
right: -.2em;
width: .5em; height: 50%;
background: dodgerblue;
content: '';
}
.boo:before {
top: 0;
transform: skewX(30deg);
}
.boo:after {
bottom: 0;
transform: skewX(-30deg);
}
EDIT:
If your background is a solid color, not an image or a gradient, you could do it in a much simpler way, without using gradients (which means that this second method also has the advantage of working in IE9).
demo #2
.boo {
display: inline-block;
position: relative;
padding: .5em 2em;
background: lightblue;
}
.boo:before, .boo:after {
position: absolute;
right: -.3em;
width: .5em; height: 50%;
box-shadow: -.2em 0 0 white;
background: inherit;
content: '';
}
.boo:before {
top: 0;
transform: skewX(30deg);
}
.boo:after {
bottom: 0;
transform: skewX(-30deg);
}
You should use a background image. Create a transparent png containing the arrow.
You would need two elements, the outer would contain the background image, the inner would contain the text, and a background color which is the same as the one on the arrow. Alternatively, you could use a second background image instead of a background color, for example if your button is not just a flat color.
The trick is to align the box containing the text with the background image.
If your arrow is 20px tall, your inner box could be e.g. 16px plus 2px padding on each side (search for box model if you would like to understand this better).
The outer element can have a right-margin set to the approximate width of the arrow image.
I hope this makes sense. The general technique is called sliding doors. I suggest reading the entire article if you have the time.
I am trying to play around with borders in CSS, but can't figure out how to achieve the following "boxy" look:
Is it possible? If so how can this be achieved (don't use dark background as it is there to add contrast)
It's possible - using :after and some additional CSS tricks with borders.
Example
http://jsfiddle.net/EaZ8r/3/
CSS
body {
background: #000;
}
#box {
height: 150px;
width: 200px;
background: #fff;
margin: 0 auto;
position: relative;
}
#box:after {
display: block;
background: blue;
width: 180px;
height: 0px;
border: 10px #000 solid;
border-top: 15px #eee solid;
content: "";
position: absolute;
bottom: 0px;
}
How it works?
The main thing here is good understanding how border is drown by browser. Check out this example: http://jsfiddle.net/n2nsB/. When two borders meet each other the canvas is split between them, what makes some kind of triangles drown there. This can be very useful, because of two things:
First of all, border-width can be set separately for all 4 borders, so you can change the angle of split! Check the example: http://jsfiddle.net/n2nsB/1/
Second, but even more important: you can set border-color equal to background to make it invisible! Example: http://jsfiddle.net/n2nsB/2/
You can set border even, when element has no height, what makes the borders only things that are drown for that element. Example: http://jsfiddle.net/n2nsB/3/
On the other hand, you should also know how :after pseudo-element works. You can find a lot of really good tutorials about that on the Web. I suggest this one for the begining: http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/
So just combine all that things and get what you want.
I'd like to draw a dotted line, vertically down the center of my page, "hiding" under any content boxes along the way... Is there a technique to do this in CSS, or will I have to use a repeating image?
This gives you dots: http://jsfiddle.net/NBMRp/
body:after {
content:"";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 50%;
border-left: 2px dotted #444; /*change these values to suit your liking*/
}
They're just not that pretty.
For the dotted line i would use:
.vertical_dotted_line
{
border-left: 1px dotted black;
height: 100px;
}
<div class="vertical_dotted_line"></div>
And to make it under other elements you need to play with the z-index of your dotted line div and the other divs (they should have a higher value of z-index)
If you wants the lines should extend out of div's height -
.dashed-lines:after {
content:"";
position: absolute;
z-index: -1;
top: -50px;
bottom: -50px;
left: 50%;
border-left: 2px dotted #ce9b3a;
}
Create a 1px-wide PNG image in Photoshop with the desired pattern, then set it as the background (or one of multiple background images in CSS3) of the <body> element, like so:
body {
background-image: url("dottedLine.png") repeat-y center top;
}
You can probably do this without image files by either using a data: URI or creating a 2px-tall CSS3 gradient that is repeated.
This can be done either by repeating image or CSS depending on what type of dot you want since CSS has only few types or even single normal dot.
With CSS you can do this by either making the border left or right.
For example
<div class="one"></div>
<div class="tow"></div>
CSS
.one{
width: 50%;
border-right: 1px dotted red;
}
and with image
body{
background-image: url("dotted.png") repeat-y center top;
}