Border-radius not working with image - html

This is the code I currently have for this image
border-radius: 10px;
border: 3px solid transparent;
-moz-border-image: -moz-linear-gradient(top, #E2B0C7 0%, #BB96C2 100%);
-webkit-border-image: -webkit-linear-gradient(top, #E2B0C7 0%, #BB96C2 100%);
border-image: linear-gradient(to bottom, #E2B0C7 0%, #BB96C2 100%);
border-image-slice: 10;
I am trying to round the border corners by using:
border-radius: 10px;
But that is not rounding the corners for me. Any help is appreciated. Thank you in advance.


you must use the div and image into div.
like this code
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
div {
background: linear-gradient(#ff0000 0%, #b200ff 50%, #ff0000 100%);
padding: 10px;
display: inline-block;
border-radius: 20px;
}
img {
width: 500px;
border-radius: 20px;
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<img src="FK8.jpg" />
</div>
</body>
</html>
best regards.


Border-radius and border-image are not the same; however, you can get this working with a ::after pseudo-element.
See updated fiddle: https://jsfiddle.net/2u44tqzy/1/
img {
position: relative;
border: 4px solid transparent;
border-radius: 10px;
background: linear-gradient(orange, violet);
background-clip: padding-box;
background: linear-gradient(to bottom, #E2B0C7 0%, #BB96C2 100%);
/* just to show box-shadow still works fine */
box-shadow: 0 3px 9px black, inset 0 0 9px white;
}
img::after{
position: absolute;
top: -4px;
bottom: -4px;
left: -4px;
right: -4px;
background: linear-gradient(to bottom, #E2B0C7 0%, #BB96C2 100%);
content: '';
z-index: -1;
border-radius: 16px;
}


I was struggling with this just now. Was using as an image as a background for a <div> and border-radius simply refused to work. The <div> had two sections - left and right. The left section had an image as a background whereas the right had a simple bg-color. I applied an overflow:hidden to the <div> and voila!

Related

Show timestamps to CSS version of iMessages Interface

I'm creating an iMessages like view of some data showing outgoing and incoming messages - I found a nice CSS solution here:
http://cssdeck.com/labs/6mifhkdc
One missing part that I need is the ability to show the timestamps when messages were sent/received - like you get in iMessages when you swipe a message to the left. I have the timestamps stored and ready to display, I just need some guidance on the CSS to use to make them appear like they do in iMessages.
(the timestamps will appear permanently on the page - no swiping involved)
I'm a newbie at CSS so not sure where to start to add this type of attribute.
Here's a sample of how my page currently looks:
<!DOCTYPE html>
<html lang="en">
<head>
<title>fmSMS Chat Thread</title>
<style type="text/css">
/* Bit of normalisation */
/* Inspired by: http://cssdeck.com/labs/6mifhkdc */
body {
background-color: #eee;
color: #222;
font: 0.8125em/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
img {
display: block;
height: auto;
max-width: 100%;
}
.container {
padding: 40px 20px;
margin: 0 auto;
width: 400px;
}
/* .bubble */
.bubble {
background-image: linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -o-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -moz-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -ms-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.25, rgb(210,244,254)),
color-stop(1, rgb(149,194,253))
);
border: solid 1px rgba(0, 0, 0, 0.5);
/* vendor rules */
border-radius: 20px;
/* vendor rules */
box-shadow: inset 0 5px 5px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
/* vendor rules */
box-sizing: border-box;
clear: both;
float: left;
margin-bottom: 20px;
padding: 8px 30px;
position: relative;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
width: auto;
max-width: 100%;
word-wrap: break-word;
}
.bubble:before, .bubble:after {
border-radius: 20px / 10px;
content: '';
display: block;
position: absolute;
}
.bubble:before {
border: 10px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.5);
bottom: 0;
left: -7px;
z-index: -2;
}
.bubble:after {
border: 8px solid transparent;
border-bottom-color: #d2f4fe;
bottom: 1px;
left: -5px;
}
.bubble--green {
background-image: linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -o-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -moz-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -ms-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.25, rgb(172,228,75)),
color-stop(1, rgb(122,205,71))
);
float: right;
}
.bubble--green:before {
border-bottom-color: rgba(0, 0, 0, 0.5);
border-radius: 20px / 10px;
left: auto;
right: -7px;
}
.bubble--green:after {
border-bottom-color: #ace44b;
border-radius: 20px / 10px;
left: auto;
right: -5px;
}
</style>
</head>
<body>
<div class="container">
<div class="bubble">
This is a sample outgoing message
</div>
<div class="bubble bubble--green">
Here's the first reply
</div>
<div class="bubble">
Here's the next sent message
</div>
<div class="bubble bubble--green">
And the final reply
</div>
</div>
</body>
</html>

You can not use CSS to add timestamps. Generate the timestamp from javascript or get it from the API and then add it to your DOM.

First add the timestamp to your application using the Javascript attribute Date.now. Then make it look pretty using CSS. CSS will only control the way elements look in your application, it's not the language to use to add elements to your application.

Found this which was close to what I was after:
http://cssdeck.com/labs/pmbrpxle

How do I make the green background color be half of the whole div?

I wonder why the div bar doesn't show green background color halfway, from left to middle. It just show the whole div bar. What could be the problem? THanks..
.BioUploadProgressBar p {
display: block;
width: 350px;
padding: 2px 5px;
margin: 12px 0;
border: 1px inset #446;
border-radius: 5px;
}
.BioUploadProgressBar p.initialize {
/*background: #0c0 none 0 0 no-repeat;*/
background-color: #0c0;
background-image: none;
background-position: 50% 0px;
background-repeat: no-repeat;
}
<div>
<div class='BioUploadProgressBar'>
<p class="initialize">Upload file 0 %</p>
</div>
</div>

Background-Position only applies to Background-Image. You'll have these options:
Use a Background-Image (But also have an additional Request)
Use a second DIV
Use a CSS Gradient (http://www.colorzilla.com/gradient-editor/ - No IE8 and stuff)

Try using this:
.progress {
height: 20px;
overflow: hidden;
background-color: #F5F5F5;
border-radius: 4px;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1) inset;
}
.cpu {
color: #FFF;
text-align: center;
transition: width 2.0s ease 0s;
background-color: #FF6633;
}
<div class="progress" style="width:500px;">
<div id="cpu" class="cpu" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 10%">
<span>10</span>
</div>
</div>

because your HTML is incorrect and your CSS is even more incorrect, you're using background properties that applies to background images, not colors, change your HTML to this:
<div>
<div class='BioUploadProgressBar'>
<div class="initialize">Upload file 0 %</div>
</div>
</div>
and your CSS to this:
.BioUploadProgressBar {
display: block;
width: 350px;
margin: 12px 0;
border: 1px solid #446;
border-radius: 5px;
}
.initialize {
border-radius: 5px;
display:inline-block;
background: #0c0;
width:175px;
;
padding:5px;
}
see FIddle

Gradient solution via colorzilla
.partialGradiend{
background: -moz-linear-gradient(left, rgba(0,204,0,1) 0%, rgba(0,204,0,1) 50%, rgba(0,204,0,0) 51%, rgba(0,204,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,204,0,1)), color-stop(50%,rgba(0,204,0,1)), color-stop(51%,rgba(0,204,0,0)), color-stop(100%,rgba(0,204,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(0,204,0,1) 0%,rgba(0,204,0,1) 50%,rgba(0,204,0,0) 51%,rgba(0,204,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(0,204,0,1) 0%,rgba(0,204,0,1) 50%,rgba(0,204,0,0) 51%,rgba(0,204,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(0,204,0,1) 0%,rgba(0,204,0,1) 50%,rgba(0,204,0,0) 51%,rgba(0,204,0,0) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(0,204,0,1) 0%,rgba(0,204,0,1) 50%,rgba(0,204,0,0) 51%,rgba(0,204,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00cc00', endColorstr='#0000cc00',GradientType=1 ); /* IE6-9 */
width:300px;
border: 1px inset #446;
border-radius: 5px;
text-align:center;
padding:10px 0px;
}
<div class="partialGradiend" style="">
50%
</div>

Skew element horizontally but just right side

i want to have design as exactly below by help of HTML 5 and CSS 3. Here is jsfiddle how i do it.
Here is the example codes
<div class="header">Akşam Sizin İçin Önerdiklerimiz
<div class="skew"></div>
</div>
<div class="line"></div>
.header {
color: white;
font-size: 14px;
display: inline-block;
padding: 5px 10px;
background-color: #6b6a69;
position: relative;
}
.skew {
position: absolute;
-moz-transform: skewX(45deg);
-ms-transform: skewX(45deg);
-o-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
transform: skewX(45deg);
right: -14px;
display: inline-block;
width: 40px;
height: 30px;
top: 0;
background: inherit;
z-index: -1;
}
.line {
height: 11px;
background-color: #6b6a69;
margin-top: -7px;
}
As you have seen that i used 3 html element to build this. What i want to achieve is to give a gradient background-color for whole that design. But there are 3 different elements so i can only apply gradient for each element separately and that wouldn't look as i want.
So i am trying to achieve that design by only 1 element via CSS 3 features like transformations.
At least skewing only right side as in the picture via removing div.skew element would be an improvement for me.
If it is possible to do that so how can i do that ?
Edit: Here is example how it looks when i apply gradient so that is why i want to simply remove extra elements for applying gradient to whole design.

This would be an easier way to do it: http://codepen.io/pageaffairs/pen/aDoFc
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.header {
color: white;
font-size: 14px;
padding: 0 0 20px 0;
background-color: #6b6a69;
position: relative;
background: -moz-linear-gradient(left, rgba(30,87,153,1) 0%, rgba(180,187,193,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(180,187,193,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(180,187,193,1) 100%);
background: -o-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(180,187,193,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(180,187,193,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(30,87,153,1) 0%,rgba(180,187,193,1) 100%); /* W3C */
overflow: hidden;
}
span {position: relative; display: inline-block; padding: 5px 10px 0 10px;}
span:after {
content: " ";
width: 2000px;
height: 0;
position: absolute;
border-top: 20px solid white;
border-right: 0 solid transparent;
border-bottom: 0 solid transparent;
border-left: 20px solid transparent;
left: 100%;
top: 0;
}
</style>
</head>
<body>
<div class="header">
<span>Akşam Sizin İçin Önerdiklerimiz</span>
</div>
</body>
</html>

CSS gradient: simulate progress bar

Trying to simulate this progress bar using css. It has two backgrounds and one of the backgrounds should only cover a part of the bar, behind the text. The width of it should be easy to manipulate to change the %.
I started with the a full bar, but really not sure how add the percentage part to it. Is it possible to do without absolute positioning?
<div class="bar">
Progress: 60%
</div>
.bar {
border: 1px solid black;
color: white;
display: table-cell;
width: 250px;
height: 50px;
text-align: center;
vertical-align: middle;
background: #003458;
background: -moz-linear-gradient(top, #003458 0%, #001727 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#003458), color-stop(100%,#001727));
background: -webkit-linear-gradient(top, #003458 0%,#001727 100%);
background: -o-linear-gradient(top, #003458 0%,#001727 100%);
background: -ms-linear-gradient(top, #003458 0%,#001727 100%);
background: linear-gradient(to bottom, #003458 0%,#001727 100%);
}
Fiddle

If you just want to lighten up like your example demonstrates, overlay 2 gradients:
.bar {
background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 60%, transparent 60%),
linear-gradient(to bottom, #003458 0%,#001727 100%);
}
Here is a demo. (Removed the vendor prefixes, you should add them again in the final code)
But the problem is, how would you know how large the bar should be? You could create several classes for each value or use JavaScript for this, but of course both solutions are not good. So like others said: Use an inner element:
<div class="bar">
<p>Progress: 60%</p>
<span style="width: 60%"></span>
</div>
CSS:
.bar {
position: relative;
border: 1px solid black;
color: white;
display: block;
width: 250px;
text-align: center;
vertical-align: middle;
height: 50px;
line-height: 50px;
background: linear-gradient(to bottom, #003458 0%,#001727 100%);
}
.bar > span {
position: absolute;
display: block;
top: 0;
left: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.1);
}
.bar > p {
display: inline;
position: relative;
z-index: 1;
}
With that you can style the value by setting the width within the <span/>'s style attribute. Btw.: I changed the display: table-cell to block and added line-height to vertically center the text. This should work in this case because there is no line break. Besides that, position: relative does nothing on table cells.
Here is a demo.

force div to surround another div

At the moment I have a parent div containing 2 div's, both div's have their own border. What I try to do is to have 1 div in the left top corner and the other div surround it on the right and bottom with margin between them. Just like the image below:
Is this even possible, using css3 and html5?
Edit: Here is the layout of the div's.
<div id="main">
<div id="leftdiv">
Here is some text and an image displayed
</div>
<div id="rightdiv">
<div class="profile"><h4>Some text</h4><img src="...."></div>
<div class="profile"><h4>Some text</h4><img src="...."></div>
<div class="profile"><h4>Some text</h4><img src="...."></div>
<div class="profile"><h4>Some text</h4><img src="...."></div>
<div class="profile"><h4>Some text</h4><img src="...."></div>
..............
</div>
</div>

You could try to fake this effect with pseudo-elements for the top-left container.
.first {
position: relative;
float: left;
height: 30px;
width: 30px;
border: 1px solid black;
margin: 0 5px 5px 0;
}
.first:after {
content: '';
position: absolute;
top: -1px;
right: -5px;
height: 35px;
width: 3px;
background-color: #fff;
border-right: 1px solid black;
}
.first:before {
content: '';
position: absolute;
bottom: -5px;
left: -1px;
height: 3px;
width: 35px;
background-color: #fff;
border-bottom: 1px solid black;
}
.second {
height: 80px;
width: 100px;
border: 1px solid black;
}
See this fiddle:
http://jsfiddle.net/fqsDp/2/

I have the following in jsfiddle.com:
#main {
float: left;
width: 400px;
}
#leftdiv {
float: left;
margin: 0 0.5em 0.5em 0;
background: green;
color: black;
width: 150px;
height: 150px;
background: rgb(255,255,255);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkYmRiZGIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(219,219,219,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(219,219,219,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(219,219,219,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(219,219,219,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(219,219,219,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(219,219,219,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dbdbdb',GradientType=0 );
border: 1px solid #E2E2E2;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#rightdiv {
background: rgb(255,255,255);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkYmRiZGIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(219,219,219,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(219,219,219,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(219,219,219,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(219,219,219,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(219,219,219,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(219,219,219,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dbdbdb',GradientType=0 );
border: 1px solid #E2E2E2;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
http://jsfiddle.net/5unJw/