I have an image which is in rectangular shape. However, I would like achieve an end result as below.
How can I achieve this in CSS / javascript?
You can achieve it using border-radius:
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
/* width and height can be anything, as long as they're equal */
}
For more info check out this article.
If you have an img tag, than simply use the snippet below to make it round
.container_class img {
border-radius: 50%;
height: 200px;
width: 200px;
}
Demo
Demo 2 (With border)
The above examples will give you a perfect circle as height = width, if you want an elliptical shape, as you've provided in your question, than you can simply increase the width of your img tag like
Demo
Note: border-radius is a CSS3 property, as of now it is widely
supported across browsers, still if IE is a game spoiler for you,
there are polyfills available like CSS3 Pie
Use border-radius: 50%; not supported in IE8 though.
Here you go.
WORKING DEMO
The HTML:
<img src="http://coolvibe.com/wp-content/uploads/2013/01/Portrait-Alexander-Beim-Bruce.jpg" />
The CSS:
img{border-radius:500px; border:2px solid #000000; width:200px; height:200px;}
I hope this is what you are looking for.
img{
border-radius:50%;
border:1px solid #000000;
height:150px;
width:200px;
}
/*You can change height width*/
Related
I want to create a circling border, as seen in the second state of this object. So the loading icon. How would I do that with JavaScript?
I'm not looking for someone writing out the full code, but would like some direction to what selectors etc to research.
Is quite easy. Basically you start with a circle with a certain width and height, a full border-radius and a transition to it. Then on hover for example, you increase the width of that circle. Doing this will smootly transform that circle into a rectangle. If you dont manage to make it work, i`l create some examples for you.
Take a look at this(hover on the circle)
div {
width: 50px;
height: 50px;
border: 3px solid green;
border-radius: 30px;
margin:0 auto;
transition: .5s;
}
div:hover{
width: 200px;
background-color: green;
}
<div></div>
From here on you can modifiy it to fit your needs.
I want to resize the space where the scrollbar moves.
I don't want it to affect how much I can scroll.
Look at the following pictures (my drawings) to better understand what I mean.
I'm using chrome so webkit is viable.
Thanks to all of your answers!
(P.S. I would love to have reduce the image size, yet I don't know how to! My apologies!).
Without nesting another element and play with its height you could simply use a huge border-bottom and place a visible border around the element using the outline property, e.g.
div {
width: 200px;
height: 300px;
outline: 1px #9bc solid;
border-bottom: 50px transparent solid;
}
Codepen demo
Result
You can't change the height of the scrollbar but you can redesign the scrollbar with -webkit-scrollbar like this:
::-webkit-scrollbar {
width: 5px;
height: 10px;
background: transparent;
}
::-webkit-scrollbar-thumb {
background-color: #808080;
}
I want make a image background like this in a div like the following image.
but I can't find any appropriate css or js properties for this.
Is anyone can help to find out how this possible ?
Looks like CSS 3D Transforms. Here's the webkit way of doing it, tweak the angle and perspective as needed. You'll have to find something equivalent for other browsers, I don't think it's fully standardized yet.
Just apply this CSS to your div with the background image. I tested this with the lovely stackoverflow logo at the top of this page, which is a div with a background image.
Edit: And here, a red border too. Don't know if its part of the image or you need CSS for it as well.
-webkit-transform: perspective(500) rotateY(-60deg);
border: 3px red solid;
It will help you
Transform properties of css
http://www.w3schools.com/cssref/css3_pr_transform.asp
I have found a nice solution and solved the problem with the help of Cubicle Dragon like following-
HTML code
<div id="div1">
<div id="div2">HELLO</div>
</div>
CSS code
#div2 {
background: url("") repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 1px solid #000000;
padding: 50px;
position: absolute;
transform: rotateY(-234deg);
}
#div1 {
border: 1px solid #000000;
height: 150px;
margin: 50px;
padding: 10px;
perspective: 89px;
position: relative;
width: 150px;
}
The grey border shouldn't be visible, it should be covered by the black border and I don't understand why it won't... here's the CSS code:
#portrait{
width:120px;
height:100px;
top:20px;
border: solid black 1px;
margin: 0px;
padding: 0px;
cursor:pointer;
}
#prof_picture{
width: inherit;
height: inherit;
border: none;
}
HTML (inside a table):
<td id="portrait">
<img id="prof_picture"></img>
</td>
and javascript
$("#prof_picture").attr('src',"profile/loading.gif");
I had to make the DOM inherit part of the attributes because when using that javascript line the image would assume its natural width and height and I wanted it just to fit the portrait. When I did this, the strange border appeared. Do you know why?
Add font-size: 0; to #portrait{}
Try setting your image to become a block element:
#prof_picture { display:block; }
Alternatively you could set it to align to the bottom (will work only if its an inline (or inline-block) element), although i think there may be cases or environments where this could produce unwanted results.
#prof_picture { vertical-align: bottom; }
Images are, by default (unless specified otherwise), inline elements. Most browsers will reserve some extra space here, but you could also counter this by setting the parent's line-height to zero.
#portrait{
line-height: 0;
}
Setting line-height: 0;, font-size: 0; or display: inline; on #profile Fixes it in the fiddle http://jsfiddle.net/CyV7j/6/
There is 4px of extra space added around the img element because of the way inline elements (line an img) are rendered inside of a table row.
Please consider styling with classes instead of ids. And restricting the use of tables to tabular data and not for the layout of photos.
I suggest you get rid of the border: none; by #prof_picture. You can also try to write the border on #portrait li this
border: 1px solid black;
As it is the right way to write a border.
If you are using certain browsers.... you need to set this in the css:
img{
outline:none;
}
I currently have a div appearing on hover, but it just pops up rather than sliding in:
#home-heroImage{
padding: 0px;
margin: 0px auto;
width:980px;
height: 525px;
position: relative;
z-index: 1;
background-color: #fcba2e;
}
#home-hero-pop{
background-color: #ffffff;
opacity:0.8;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
font: 16px Helvetica,Arial,sans-serif;
font-weight: bold;
color: #6d6e70;
text-align: left;
padding: 10px;
position: absolute;
right: 0px;
top: 0px;
height: 505px;
width: 460px;
z-index: 2;
}
Fiddle.
After looking through the posts on SO, I found this example, which would work if I could get it to slide in from the right instead of the bottom. I don't know much about JavaScript or jQuery so the modifications I've tried to make to this code are not producing the desired effect:
$(document).ready(function(){
$('.up-down').mouseover(function(){
$('.default').stop().animate({
height: 0
}, 200);
}).mouseout(function(){
$('.default').stop().animate({
height: 200
}, 200)
})
});
Fiddle.
I've tried reading several JavaScript articles online but they're over my head right now.
Based on the example you give, here's it sliding in from the right.. is this what you are after? http://jsfiddle.net/jPneT/208/
EDIT 2017
Too much jQuery
You're right, here's a CSS alternative
.left-right {
overflow:hidden;
height:200px;
width:200px;
position:relative;
background-color:#333;
}
.slider {
width:200px;
height:200px;
position:absolute;
top:0;
right:-200px;
background-color:#000;
color:#fff;
transition:0.4s ease;
}
.left-right:hover .slider {
right:0;
}
<div class="left-right">
<div class="slider">Welcome !</div>
</div>
My answer uses no JavaScript. CSS can handle this automatically for you.
Here's a link to a fork of your code as a working example:
http://jsfiddle.net/g105b/Adk8r/11/
There is only a little change from your example. Rather than hiding the element and showing it with display property, the element is placed off-screen using right: -480px (where 480 is the cumulative width), and moving it to right: 0 when the mouse hovers.
Using CSS transitions provides the animation, and support is very good now: http://www.caniuse.com/#search=transition
This technique allows all browsers back to IE6 view and use your website, but users with older browsers will not have an enhanced experience. Unless you require the animation - as in, it is a feature for it to animate - I would suggest using CSS transitions to futureproof your website and use web standards.
Users of deprecated browsers deserve a deprecated experience.
Fiddle: http://jsfiddle.net/BramVanroy/Adk8r/10/
As said: please learn to write logical and correct HTML. Your markup is invalid and unlogical. You should perfect your HTML and CSS and then study JavaScript and jQuery rather than trying to get a hang of everything at once. This code is a pain to the eye.
Here's what's wrong:
Try to avoid large chunks of inline style and JavaScript.
You use a span where one would use a heading-tag (<h1>Welcome</h1>) and style it via CSS.
You use line breaks <br /> where one would use paragraphs:
<p>This div appears on hover but I would like to slide in from the right instead of just appearing.</p>
There's no structure in your code. This is not necessary to create a working website, but it's good practice to give child elements an indent of two or four spaces. This way, it's very clear for yourself which element is which child or parent. The same is true for your CSS rules: it's better to put your selector first and then the rules (indented) like so:
h1 {
font-weight: bold;
font-size: 160%;
}
You have a closing </a> tag but there's no opening <a>.
There is a very simple way to do it using css3.
instead of going through the hassle of javascript
try something like in the CSS:
div.move {
height: 200px;
width: 200px;
background:#0000FF;
color:#FFFFFF;
padding:10px;
}
/*on mouse hover*/
div.move:hover {
/*General*/
transform:translate(200px,100px);
/*Firefox*/
-moz-transform:translate(200px,200px);
/*Microsoft Internet Explorer*/
-ms-transform:translate(200px,100px);
/*Chrome, Safari*/
-webkit-transform:translate(200px,100px);
/*Opera*/
-o-transform:translate(200px,100px);
}
in the HTML:
<div class="move">Anything is here moves!</div>
Also the translate works on an x/y axis.
This is very simple. All you need is HTML, CSS and jQuery.
Make a solid div.
Make the parent div to hide overflow (overflow:hidden) in CSS.
Assign a margin-left of 100% (or some length) that the required div hides away because of margin.
Do a jquery animate() function to bring down margin-left to 0 or 0%.
You can also set the speed of animation by giving time in ms (milliseconds) or some expression like slow or fast