I know I can use box-sizing:border-box; to create the border inside an elements actual width, but I want my image to be not affected by the border.
example:
div {
width:100px;
height:100px;
box-sizing:border-box;
background-image:url("someplace/demo.jpg");
background-size:100%;
border:1px solid black;
}
With the codes above, the image width and height will be 98px, because border takes 1 pixel for each parallal sides.
But I want my image to still stay 100 px / 100% and border as an overlaping border on top of the image.
Is there any way to do this ???
you need to set background-size to actual size of your container.
div {
width:100px;
height:100px;
box-sizing:border-box;
background:url("http://lorempixel.com/100/100") center no-repeat ;
background-size:100px 100px;
border:1px solid black;
}
img ~ div {
border:15px solid rgba(100,200,0,0.5);
}
div + div {
background-size:100%;
}
div, img {
display:inline-block;
}
<div></div>
<img src="http://lorempixel.com/100/100"/>
<div></div>
<div></div>
I inserted image and bigger border in demo to easely see the different effects
for he outline , you will need ,outline offset
div {
width:100px;
height:100px;
box-sizing:border-box;
background:url("http://lorempixel.com/100/100") center no-repeat ;
background-size:100px 100px;
outline:15px solid rgba(100,200,0,0.5);
outline-offset:-15px;
}
<div></div>
border increased to make effect obvious
or box-shadow ?
div {
width:100px;
height:100px;
box-sizing:border-box;
background:url("http://lorempixel.com/100/100") center no-repeat ;
background-size:100px 100px;
box-shadow:inset 0 0 0 15px rgba(100,200,0,0.5);
}
<div></div>
use outline instead of border
div {
width: 100px;
height: 100px;
background-image: url("someplace/demo.jpg");
background-size: 100%;
outline: 1px solid black;
}
.classname {
outline: 2px solid red;
}
Ref: http://www.w3schools.com/cssref/css3_pr_outline-offset.asp
Related
Two images each 50% width. I want to hover on the left image and it should widen to 52% over the right image. The right image should not move. Hover the right image and it should widen to 52% over the left image and the left image should not move.
Two issues...
1. The hover over the left image works but moving off it, it doesn't transform gracefully back to 50% but instead, it jumps back as if no transition effect is applied.
2. hovering the right image moves the right image to the left instead of expanding it.
CSS is shown here and I can't seem to identify what part(s) is/are incorrect so I am asking for help.
<style>
body{
box-content: border-box;
}
.photo_section_new {
display:flex;
}
.photo_section_new > div {
height:800px;
flex-grow:1;
transition:0.5s;
background-size:cover;
background-position:center;
background-repeat: no-repeat;
}
.photo_section_new > div:nth-child(1) {
border-bottom: 20px solid #c54985;
border-top: 20px solid #c54985;
background:#000 url(https://picsum.photos/id/1003/600/600);
background-size: cover;
}
.photo_section_new > div:nth-child(2) {
border-bottom: 20px solid #005d99;
border-top: 20px solid #005d99;
background:#000 url(https://picsum.photos/id/103/600/600);
background-size: cover;
}
.photo_section_new > div:nth-child(3) {
display:none;
}
.photo_section_new > div:hover {
flex-grow:1.1;
}
</style>
<div class='photo_section_new'>
<div id='main_photo'>
</div>
<div id='second_photo'>
</div>
<div class='clear'></div>
</div>
Neither image should move/change position. They should each just expand over the other when they are hovered over. I'd appreciate any suggestions you might have.
You are overcomplicating a simple task. Here is an easier idea using flexbox:
.container {
display:flex;
}
.container > div {
height:200px;
border-bottom:5px solid;
flex-grow:1;
transition:0.5s;
background-size:cover;
background-position:center;
}
.container > div:first-child {
background-image:url(https://picsum.photos/id/1003/600/600)
}
.container > div:last-child {
background-image:url(https://picsum.photos/id/103/600/600)
}
.container > div:hover {
flex-grow:1.1;
}
<div class="container">
<div></div>
<div></div>
</div>
How would I create a "short" vertical border between columns in xaringan / remark?
I want to add a vertical border between columns in my slides, but one that's only about 80% the height of the div. Here's the xaringan example for two column layout: https://slides.yihui.name/xaringan/#15
I suppose the css for the border of the left column could look something like this:
.pull-left {
border-right-width: 1px;
border-right-style: solid;
padding-right: 2px
}
But how can I get it to be a little shorter than the height of the div?
Yes, you can create 80% height from the parent div
<div></div>
div {
height:200px;
width:500px;
background:gold;
position:relative;
border-top:10px solid grey;
border-bottom:2px solid #000;
}
div:after {
content:"";
position:absolute;
top:20%;
right:0;
width:2px;
height:60%;
background:#000;
}
i created a white div and gave it an opacity of 0.4 and then i gave it a black border. however because i made the div transparent, the border was also transparent. How can I make the border non transparent whilst keeping the div transparent?
CSS:
#box{
background-color:white;
opacity:0.4;
width:600px;
height:200px;
border-radius:15px;
border: 5px solid black;
}
You cannot make part of an element one opacity and another part of that same element another opacity.
Here is a silly example: https://jsfiddle.net/sheriffderek/85utzq4p/
Try using rgba() for background color instead - or wrap the element in something.
.box {
background: rgba(255, 0, 0, .5);
}
Add another div that contains the current div. Remove the border property and the width and height properties on the #box and add it the other containing div. Make sure the containing div has a class instead of an id. An example:
.entirebox {
width: 600px;
height: 200px;
border-radius: 15px;
border: 5px solid black;
}
#box {
background-color: white;
opacity: 0.4;
}
<div class="entirebox">
<div id="box">
<p>The stuff that you originally had here</p>
</div>
</div>
Here, I added the containing div and named it entirebox. Notice how the containing div has a class, while the div you started off with still has an id.
Hope this helped.
if you are looking for something that can work with solid color backgrounds and image backgrounds both you can create another parent and set it in this way:
body{
margin: 0px;
}
div.child {
display: block;
position: relative;
width: 200px;
height: 150px;
background: red;
opacity:0.3;
}
div.parent{
display: inline-block;
position:relative;
border: 4px solid black;
top: 0px;
left: 0px;
}
<div class="parent">
<div class="child">
</div>
</div>
I am attempting to display a background non-repeated picture on the top right corner of my div. I am using the following code
<html>
<head>
<style>
.UseA
{
display:block;
/* Display image in the top left corner */
background-image:url('paper.gif');
*/--------------------------------------*/
text-indent:10px;
border-radius: 10px;
background: #BADA55;
min-height:50px;
width:300px;
}
.UseA .dta
{
display:block;
border-radius: 10px;
width:130px;
background-color:grey;
color:white;
position:relative; /*Relative to normal position*/
left:160px; /*Move away from left*/
}
</style>
</head>
<body>
<div class="UseA">
Hello , My name is Jim
<div class="dta">something here</div>
</div>
</body>
</html>
However The image is not being displayed.
I am trying this code out here Any suggestions on what I might be doing wrong ?
You declare background: #BADA55; after background-image, so it's overwriting it.
Try this instead:
UseA {
display:block;
text-indent:10px;
border-radius: 10px;
background: #BADA55 url('paper.gif') no-repeat top right;
min-height:50px;
width:300px;
}
You're overwriting background-image with background. Combine them:
http://jsfiddle.net/isherwood/ANr6K/
background: url('image.png') right top no-repeat #BADA55;
If your papaer.gif asset is correct, then remove your background color for .UseA
.UseA
{
display:block;
/* Display image in the top left corner */
background-image:url('paper.gif');
*/--------------------------------------*/
text-indent:10px;
border-radius: 10px;
background: #BADA55;
min-height:50px;
width:300px;
}
Change to
.UseA
{
display:block;
/* Display image in the top left corner */
background-image:url('paper.gif');
*/--------------------------------------*/
text-indent:10px;
border-radius: 10px;
min-height:50px;
width:300px;
}
Sample on Fiddle using Google image as a background: http://jsfiddle.net/C9qdL/
I'm using CSS transformation to rotate some elements. However, rotated elements may render partially outside its parent.
Is it possible to avoid this behavior?
To illustrate my thoughts, here is a jsfiddle that highlight this.
There is two divs :
<div id="g">
<div id="inner"></div>
</div>
and few css rules:
#g {
background:silver;
width:400px;
height:400px;
margin:100px 100px 100px 100px;
border:solid 6px green
}
#inner {
background:blue;
width:100px;
height:100px;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
In fact, the blue rectangle should not render outside the gray rectangle.
Actual:
Expected:
The main idea behind this question, is to add some kind of viewport with interactivity, but never outside the viewport.
Add overflow: hidden; to #g. See this: http://jsfiddle.net/Z5TZ3/5/.
It should look like this:
#g {
background:silver;
width:400px;
height:400px;
margin:100px 100px 100px 100px;
border:solid 6px green;
overflow: hidden;
}
#inner {
background:blue;
width:100px;
height:100px;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
That'll give you: