Develop Reference

Rotate Div by clicking on another Div

Could some one help me with one question:
I have 2 divs.
The first one is being used to rotate the second div.
the second one to rotate it self to the regular rotation.
I click on first div --> it rotates the second DIV.
I click on the second div, it's rotating it self to the previous/regular position.
#_4220w_86 {
height: 20px;
width: 20px;
background-color: #171717;
border-radius: 50%;
margin-top: -43px;
margin-left: 124px;
cursor: pointer;
}
#_4220w {
width: 0;
height: 0;
border-top: 3px solid transparent;
border-left: 6px solid #ec820f;
border-bottom: 3px solid transparent;
margin-left: 132px;
margin-top: -13px;
cursor: pointer;
}
#_4220w_2 {
position: absolute;
right: 20px;
height: 28px;
width: 28px;
background-color: #0f0f0f;
border-radius: 100%;
cursor: pointer;
top: 45px;
}
._4220w_2 {
width: 0;
height: 0;
border-style: solid;
border-width: 5.5px 0 5.5px 10px;
border-color: transparent transparent transparent #ec820f;
margin-left: 10px;
margin-top: 8px;
}
<!--Here is the first DIV:-->
<div id="_4220w_86">
</div>
<div id="_4220w">
</div>
<!--Here is the second DIV:-->
<a href="#" id="_4220w_2">
<div class="_4220w_2"></div>
</a>

try to use this code
http://jsfiddle.net/24yboknc/1/
html
<div id="rotate">rotate the other</div>
<div id="rotate2"> back to normal</div>
css
#rotate,#rotate2{
width: 100px;
height: 100px;
background: red;
margin: 50px;
text-align: center
}
#rotate2.rotated{
transform: rotate(90deg);
}
js
$('#rotate').click(function(){
if(!$('#rotate2').hasClass('rotated')){
$('#rotate2').toggleClass('rotated');
}
});
$('#rotate2').click(function(){
if($('#rotate2').hasClass('rotated')){
$('#rotate2').removeClass('rotated');
}
});
inspired to jQuery rotate div onclick +/-90

DOM Transitions not working on different resolution screen?

I was creating a scrolling effect such that when i scroll to the second page, only then will the download button will fade in, and on scrolling to third page, contribute button fades in. I have a laptop with screen resolution of 1366 x 768, but when my friend opened the website, he could not see the transition unless he zoomed in. His screen resolution was 1920 x 1080.
Now how do i ensure that as soon as the user scrolls down to the location where the download/contribute buttons are hidden, then only the buttons fade into visibility.(so as to say, a method to know when did the element appear into view of window.)
PS. no jQuery please. pure JS solution wanted. Also it will be great if one can explain why this problem is happening in screens of different resolution.
var download = document.getElementById("download");
var contribute = document.getElementById("contribute");
document.addEventListener("scroll", checkVisible);
function checkVisible() {
var scr = window.pageYOffset;
if (scr >= 400) {
download.style.opacity = "1";
download.style.left = "80%";
}
if (scr >= 900) {
contribute.style.opacity = "1";
contribute.style.left = "5%";
}
}
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
}
#page1 {
width: 100%;
height: 700px;
position: relative;
z-index: -2;
border-bottom: 2px solid black;
}
#title {
position: relative;
top: 200px;
width: 500px;
height: 90px;
font-size: 40px;
margin: 0 auto;
text-align: center;
color: white;
text-shadow: 1px 0 2px black, 0 1px 2px black, -1px 0 2px black, 0 -1px 2px black;
}
#fadetitle {
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.2);
position: absolute;
top: 0;
left: 0;
z-index: -1;
border-radius: 10px;
}
#title h1 {
position: relative;
z-index: 0;
top: -5px;
}
#aboutsite {
position: absolute;
width: 90%;
z-index: 0;
color: white;
top: 450px;
text-align: center;
margin-left: 5%;
font-size: 25px;
}
#page2 {
width: 100%;
height: 500px;
background-size: cover;
position: relative;
border-bottom: 2px solid black;
}
#downloadtext {
font-size: 25px;
width: 500px;
text-align: center;
color: white;
position: relative;
top: 160px;
left: 35%;
font-weight: bold;
text-shadow: 0 0 5px black;
}
.choice {
display: block;
width: 180px;
height: 50px;
background-color: #4d94ff;
text-align: center;
border: 1px solid black;
border-radius: 15px;
box-sizing: border-box;
text-decoration: none;
position: relative;
}
.choice p {
margin-top: 15px;
font-weight: bold;
color: black;
}
.choice:hover {
cursor: pointer;
background-color: #0052cc;
}
#download {
top: 225px;
left: 85%;
opacity: 0;
transition: background-color 0.2s, left 0.5s ease-out, opacity 0.2s;
}
#page3 {
width: 100%;
height: 500px;
background-attachment: fixed;
background-size: cover;
position: relative;
}
#contribute {
top: 225px;
left: 1%;
opacity: 0;
transition: background-color 0.2s, left 0.5s ease-out, opacity 0.2s;
}
#contributetext {
font-size: 25px;
width: 500px;
text-align: center;
color: white;
position: relative;
top: 160px;
left: 25%;
font-weight: bold;
text-shadow: 0 0 5px black;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="page1">
<div id="fade"></div>
<div id="title">
<div id="fadetitle"></div>
<h1</h1>
</div>
<p id="aboutsite"></p>
</div>
<div id="page2">
<a id="download" class="choice" href="#">
<p>DOWNLOAD</p>
</a>
<p id="downloadtext"></p>
</div>
<div id="page3">
<a id="contribute" class="choice" href="contribute.html" target="_blank">
<p>CONTRIBUTE</p>
</a>
<p id="contributetext"></p>
</div>
<script src="script.js"></script>
</body>
</html>

Hide elements behind transparent DIV but not background

so I have circled divs (with border-radius) and each one is connected with a line. Problem is that they are semi-transparent, and they're connected from the center of the div, so you can see a the line through the div. I could make the div opaque, but I wan't to show the background. So, is there a way of hiding specific elements that are behind a div, but show the background of the page? Even if it's using js/jquery.
Here's my simulated situation (in my code lines generate automatically):
https://jsfiddle.net/muud6rqf/2/
body{
background: url(http://www.intrawallpaper.com/static/images/abstract-mosaic-background.png) no-repeat center center fixed;
background-size: cover;
}
.circle{
border: 2px solid red;
width: 36px;
height: 36px;
border-radius: 100%;
position: absolute;
box-shadow: 0 0 8px 2px rgba(255,0,0,0.6), inset 0 0 8px 2px rgba(255,0,0,0.6);
}
.simulated-line{
position: absolute;
width: 181px;
height: 4px;
background: green;
top: 64px;
left: 118px;
transform-origin: 0% 50%;
transform: rotate(25deg);
}
<div class="circle" style="left: 100px; top: 46px"></div>
<div class="circle" style="left: 260px; top: 121px"></div>
<div class="simulated-line"></div>
EDIT: This is what it looks like:
This is how I want it:

Its a little hack with z-index, I don't know if it can be a good solution for you or not but you can have look at snippet.
Add z-index:-1 to .simulated-line so line will goes back to circle.
Add background: inherit; to .circle so background gets filled.
body{
background: url(http://www.intrawallpaper.com/static/images/abstract-mosaic-background.png) no-repeat center center fixed;
background-size: cover;
background-color: #000;
}
.circle{
border: 2px solid red;
width: 36px;
height: 36px;
border-radius: 100%;
position: absolute;
box-shadow: 0 0 8px 2px rgba(255,0,0,0.6), inset 0 0 8px 2px rgba(255,0,0,0.6);
background: inherit;
}
.simulated-line{
position: absolute;
width: 181px;
height: 4px;
background: green;
top: 64px;
left: 118px;
transform-origin: 0% 50%;
transform: rotate(25deg);
z-index: -1;
}
<div class="circle" style="left: 100px; top: 46px"></div>
<div class="circle" style="left: 260px; top: 121px"></div>
<div class="simulated-line"></div>

How to achieve a zooming effect on a carousel background using CSS3 and JQuery

I want to add a background zooming out effect same as in this website carousel.. I cannot figure out a solution for that as new to web-designing.
this is the code for the div I want to apply that effect:
MARKUP:
<div class="banner">
<div class="content block1 animated">
<h1>Ceramic Directory</h1>
<span>World's largest Ceramic hub, all the ceramic traders reside here!</span>
Register now
<span class="handler">→</span>
</div>
</div>
CSS:
.banner{
margin-bottom: 10px;
background-image: url("../images/png.jpg");
background-repeat: no-repeat;
height: 700px;
background-size: cover;
width: 100%;
}
.banner .block1{
background-color: rgba(256,256,256,0.7);
margin-top: 10%;
height: 300px;
position: absolute;
width: 90%;
padding-top: 7%;
animation-name: fadein;
-webkit-animation-name: fadein;
}
.banner .block1 h1{
text-align: center;
font-family: LatoWebLight;
font-size: 40px;
margin-bottom: 5px;
}
.banner .block1 span{
text-align: center;
font-family: LatoWebHairline;
font-size: 25px;
margin-bottom: 30px;
display: block;
}
.banner .block1 a{
text-align: center;
border-radius: 5px;
border: 1px solid black;
font-family: LatoWebMedium;
font-size: 18px;
margin-left: 45%;
margin-top: 5%;
padding: 10px;
text-decoration: none;
color: black;
}
.banner .block1 .handler{
text-align: center;
border-radius: 5px;
border: 1px solid black;
cursor: pointer;
font-size: 18px;
margin-left: 105%;
margin-top: -5%;
padding: 10px;
color: black;
width: 20px;
transition: color 0.2s;
-webkit-transition: color 0.2s;
transition: background 0.2s;
-webkit-transition: background 0.2s;
}
.banner .block1 .handler:hover{
font-weight: 900;
background: rgba(34,34,34,0.5);
color: white;
}
how did they make that?
Thanks for the help

The website you mentioned uses a jQuery plugin to animate the header image. You can find the plugin's page here and some detailed documentation here
If you don't plan on using a plugin, you can achieve the image scalling effect by using CSS3. Same example below:
.test {
width: 300px;
height: 300px;
position: relative;
left: 30px;
top: 30px;
transition: all 1s;
}
.test:hover {
-webkit-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}
.test:after {
content: '';
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background: url("http://lorempixel.com/600/400");
background-size: cover;
}
<div class="test">
</div>

CSS/jQuery - Is it possible to create this shape (something like inverted circle)

I have no idea how would i make something like inverted circle in the corners. I have attached picture for better understanding.
Is this even possible to create using CSS3 or perhaps jQuery?

How i would recommend create that shape SVG.
Css solution:
Using a before and after elements that matches the background.
.shape {
position: relative;
width: 400px;
height: 120px;
background-color: cornflowerblue;
text-align: center;
color: white;
line-height: 120px;
}
/*replace with "" if your going to use the code*/
.shape:before {
content: "↙";
font-size: 2.5em;
text-indent: 35%;
line-height: 0%;
position: absolute;
top: calc(100% - 20px);
left: 0;
width: 35%;
height: 50%;
background-color: white;
border-top-right-radius: 15px;
}
.shape:after {
content: "↘";
line-height: 0%;
text-indent: -43%;
font-size: 2.5em;
position: absolute;
top: calc(100% - 20px);
right: 0;
width: 35%;
height: 50%;
background-color: white;
border-top-left-radius: 15px;
}
.shape .extra {
position: absolute;
top: 100%;
background-color: cornflowerblue;
width: 30%;
height: 30%;
left: 35%;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
<div class="shape">This is not a problem any more
<div class="extra"></div>
</div>
SVG:
Using the path element and then using the Bezier Curves command.
MDN paths
<svg width="300px" viewbox="0 0 100 60">
<path fill="cornflowerBlue" d="m 0,0
100,0
0,30
-25,0
c-5,0 -5,0 -5,5
v20
c0,5 0,5 -5,5
h-30
c-5,0 -5,0 -5,-5
v-20
c 0,-5 0,-5 -5,-5
h-25z" />
</svg>

The codepen link here (http://codepen.io/techsev/pen/dtAfB/) will teach you how to useadditional divs and shape them to create inverted corners. There is no way currently to invert rounded corners without attaching additional frameworks to a style sheet.
#import "compass/css3";
body {
background-color: #fff;
}
.wrapper {
overflow:hidden;
width:200px;
height:200px;
}
div.inverted-corner {
box-sizing:border-box;
position: relative;
background-color: #3e2a4f;
height: 200px;
width: 200px;
border: solid grey 7px;
}
.top, .bottom {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
}
.top:before, .top:after, .bottom:before, .bottom:after{
content:" ";
position:absolute;
width: 40px;
height: 40px;
background-color: #fff;
border: solid grey 7px;
border-radius: 20px;
}
.top:before {
top:-35px;
left:-35px;
}
.top:after {
top: -35px;
right: -35px;
box-shadow: inset 1px 1px 1px grey;
}
.bottom:before {
bottom:-35px;
left:-35px;
}
.bottom:after {
bottom: -35px;
right: -35px;
box-shadow: inset 1px 1px 1px grey;
}
<div class="wrapper">
<div class="inverted-corner">
<div class="top"> </div>
<h1>Hello, use mult. divs inside a div to do this</h1>
<div class="bottom"> </div>
</div>
</div>