IOS 7 Layering

Developer
Mnicpt
Size
2,931 Kb
Views
36,432
  1. IOS 7 Layering Previews
  2. IOS 7 Layering HTML Codes
  3. IOS 7 Layering CSS Codes
  4. IOS 7 Layering JS Codes

How do I make an ios 7 layering?

Playground for figuring out how to simulate iOS 7 layering using CSS filters and opacity.. What is a ios 7 layering? How do you make a ios 7 layering? This script and codes were developed by Mnicpt on 30 July 2022, Saturday.

IOS 7 Layering Previews
IQ Test

IOS 7 Layering - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>iOS 7 Layering</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="device"> <div class="phone_bkgrd"> <!-- this gets blurred --> </div> <div class="rounded"> <div class="cloned_bkgrd"> <!-- cloned original background --> </div> </div> <div class="control_center_bkgrd hide"> <!-- transparent background for control panel --> </div> <div class="control_center hide"> <div class="title">MINI</div> <div>John Cooper Works GP</div> </div> <div class="modal hide"> <div class="modal_bkgrd"> </div> <div class="modal_title"> MINI GP </div> <div class="modal_content"> Text describing how awesome the MINI GP is. </div> </div>
</div>
<div class="controls"> <button id="openBtn">Open Control Panel</button> <br> <button id="closeBtn">Close Control Panel</button> <br> <button id="openModal" class="modalBtn">Open Modal</button> <button id="closeModal" class="modalBtn">Close Modal</button>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

IOS 7 Layering - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Raleway+Dots);
.device { position:relative; float:left; border-radius:5px; border:2px solid #000; width:590px; height:300px;
}
.device > div, .cloned_bkgrd { position:absolute; border-radius:3px; margin:0; padding:0; width:100%; height:100%;
}
.blur { -webkit-filter:blur(10px);
}
.phone_bkgrd { width:100%; background: url("http://i.telegraph.co.uk/multimedia/archive/02497/Mini-JCW-GP_2497198b.jpg"); background-repeat:no-repeat;
}
.cloned_bkgrd { background-image: url("http://i.telegraph.co.uk/multimedia/archive/02497/Mini-JCW-GP_2497198b.jpg"); background-repeat:no-repeat; border-radius:5px 5px 0 0;
}
div.control_center_bkgrd { border-radius:0 0 5px 5px; height:150px; bottom:0; background:white; opacity:.5;
}
div.control_center { font-family: 'Raleway Dots', cursive; font-size:20px; color:white; height:140px; bottom:0; text-align:center;
}
.title { color:black;
}
.controls { float:left; margin-left:40px;
}
button { display:block; padding:12px; border-radius:6px; border:1px solid transparent; color:white; box-shadow:0 1px 3px #999; text-shadow:0 -1px 1px black; font-family: 'Raleway Dots', cursive; font-size:14px; cursor:pointer;
}
#openBtn{ background:-webkit-linear-gradient(top,#000 0%, #b11 1%, #a11 50%, #a11 100%);
}
#openBtn:hover{ background:-webkit-linear-gradient(top,#000 0%, #a11 1%, #b11 50%, #b11 100%);
}
#closeBtn{ background:-webkit-linear-gradient(top,#000 0%, #777 1%, #666 50%, #555 100%);
}
#closeBtn:hover{ background:-webkit-linear-gradient(top,#000 0%, #666 1%, #666 50%, #777 100%);
}
.modalBtn{ background:black;
}
.modalBtn:hover{ background:#333;
}
.device > .modal{ position:absolute; width:390px; height:200px; margin:50px 100px; font-family: 'Raleway Dots', cursive; font-size:14px; color:white; box-sizing:border-box; border-radius:20px;
}
.device .modal_bkgrd{ background:#aaa; opacity:.5; width:100%; height:100%; border-radius:20px;
}
.device .modal_title{ position:absolute; top:-30px; width:80%; margin-left:10%; font-size:26px; font-family:sans-serif; text-align:center;
}
.device .modal_content{ position:absolute; padding:20px; top:0; right:0; left:0;
}
.overlay{ position:relative; opacity:.9;
}
.hide { display:none;
}
.rounded{ border-radius:20px;
}

IOS 7 Layering - Script Codes JS Codes

$('#openBtn').on('click', function() { $('.phone_bkgrd').addClass('blur'); $('.control_center_bkgrd, .control_center') .slideDown(); $('.cloned_bkgrd').animate({ height : "150px" });
});
$('#closeBtn').on('click', function() { $('.control_center_bkgrd,.control_center') .slideUp(); $('.cloned_bkgrd').animate({ height : "100%" }); setTimeout(function() { $('.phone_bkgrd').removeClass('blur'); },500);
});
$('#openModal').on('click', function() { $('.phone_bkgrd').addClass('overlay'); $('.cloned_bkgrd') .css({clip:'rect(50px,490px,250px,100px)'}) .addClass('blur'); $('.modal').show();
});
$('#closeModal').on('click', function() { $('.phone_bkgrd').removeClass('overlay'); $('.cloned_bkgrd') .removeClass('blur') .css({clip:'auto'}); $('.modal').hide();
});
IOS 7 Layering - Script Codes
IOS 7 Layering - Script Codes
Home Page Home
Developer Mnicpt
Username mnicpt
Uploaded July 30, 2022
Rating 3
Size 2,931 Kb
Views 36,432
Do you need developer help for IOS 7 Layering?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mnicpt (mnicpt) Script Codes
Name
JavaScript Aspect
Angular Calculator
First 100 Prime Numbers
Fading Divider
Rotate Image
A Pen by mnicpt
Graph Paper Background
SerializedAsyncQueue
Balanced Binary Search Tree
Graph API
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!