How to create trapezoid div with background repeat - javascript

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;
}

Related

How to animate a border?

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.

How to reduce the range space of scrollbar to be different from the div height?

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;
}

Body of page not shrinking at all, CSS, HTML

Right now I have a body with a width of 90%, and a left and right margin of 5%, and a border of 1px. Here's what I'm trying to do. I'm trying to make it so that when you zoom out all the way using ctr-, it'll shrink until it's a pin-prick in the middle of the page, but right now the body's width isn't shrinking at all when I zoom out all the way. It's staying the same size. Not sure what I did wrong. Please take a look at my code.
body {
width: 90%;
margin-left: 5%;
margin-right: 5%;
border: 1px solid black;
}
P.S: If you're not really understanding what I'm talking about, please either hit ctr-, or ctr and the scroll thing on your mouse until your page's size is around 25%. Do you see how stackoverflow is like a pin-prick smack-dab in the middle? Do you see the width of the entire site being shrunk down to that size? Well, when I do that, the body of my site doesn't shrink at all. It stays the same size.
Change % to px
body {
width: 1000px;
margin-left: 5%;
margin-right: 5%;
border: 1px solid black;
margin:auto;
}
I think this will fix your problem. Though best not using your body element as a wrapper. Use a div with the ID of wrapper like so.
#wrapper {
width: 90%;
margin: 0 auto;
box-sizing: border-box;
border: 1px solid black;
}
<body>
<div id="wrapper">
</div>
</body>
What this code does is sets the width to 90% so auto in margin property to take effect which centers your wrapper in the middle of their screen and uses border-box property so the border 1px width will not effect the layout, though you could use outline: 1px solid black if you do not want to use border-box.

How do we display the circled area of an image in html?

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*/

Need help with Img within Div tag shows above curvy border

I am trying to get a curvy border that works in all browsers which i think have i have achieved now with a curvycorner.js add on i have found.
The trouble i am having now is that if i put an img in the div the corners of the image lay over the border corners.
example here, http://www.cozeez.co.uk/offline/test.php
Any ideas?
Thanks
Lee
The only real answer i can think of is to do it with CSS.
check this JSfiddle
http://jsfiddle.net/gty2G/4/
Set the image as the background to the div.
You just need to add overflow:hidden to the .myBox style declaration. The fix is more apparent when you use an image with a darker background:
http://jsfiddle.net/rsobers/gty2G/
edit
your right you just need to add overflow hidden
.myBox {
display: inline-block;
text-align: left;
border-top: 3px solid #0F0;
border-bottom: 3px solid #0F0;
border-left: 3px solid #000;
border-right: 3px solid #000;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
overflow:hidden
}
heres a demo
MORE INFO
check out css3-rounded-corners-hide-overflow-in-chrome-opera

Categories

Resources