IOS shadow effect with React

Developer
Martin Banks
Size
3,562 Kb
Views
8,096
  1. IOS shadow effect with React Previews
  2. IOS shadow effect with React HTML Codes
  3. IOS shadow effect with React CSS Codes
  4. IOS shadow effect with React JS Codes

How do I make an ios shadow effect with react?

IOS style translucent image shadow effect as React component. What is a ios shadow effect with react? How do you make a ios shadow effect with react? This script and codes were developed by Martin Banks on 27 December 2022, Tuesday.

IOS shadow effect with React Previews
IQ Test

IOS shadow effect with React - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>iOS shadow effect with React</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="app"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

IOS shadow effect with React - Script Codes CSS Codes

*{	transition: all 0.2s ease-in-out 0s
}
.card {	position: relative;	width: 300px;	height: 300px;	margin: 40px auto;
}
.image, .shadow {	position: absolute;	width: 100%;	height: 100%;	background-position: center;	background-repeat: no-repeat;	background-size: 105%;	border-radius: 8px;	background-color: #eee;
}
.shadow {	transform: scale(0.9) translateY(30px);	-webkit-filter: blur(25px);	filter: blur(25px);	background-color: rgba(0,0,0,0.3);
}
.shadowImage {	position: absolute;	width: 100%;	height: 100%;	opacity: 0.8;
}
.card:hover{	transform: scale(1.04) translateY(-5px);
}
.card:hover .image,
.card:hover .shadow {	background-size: 103%;
}
.card:hover .shadow {	transform: scale(0.85) translateY(40px);	-webkit-filter: blur(30px);	filter: blur(30px);
}
button{ position: relative; margin: 0 auto; left: 50%; transform: translate3d(-50%, 0,0)
}

IOS shadow effect with React - Script Codes JS Codes

"use strict";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var imageName = function imageName(image) {	return {	backgroundImage: "url(https://unsplash.it/200/300/?" + image + ")"	};
};
var ChangeImageButton = function (_React$Component) {	_inherits(ChangeImageButton, _React$Component);	function ChangeImageButton() {	_classCallCheck(this, ChangeImageButton);	return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));	}	ChangeImageButton.prototype.render = function render() {	return React.createElement(	"button",	{ onClick: this.props.handleClick },	this.props.text	);	};	return ChangeImageButton;
}(React.Component);
var Card = function (_React$Component2) {	_inherits(Card, _React$Component2);	function Card() {	_classCallCheck(this, Card);	var _this2 = _possibleConstructorReturn(this, _React$Component2.call(this));	_this2.state = {	imageNumber: 'image=881'	};	_this2.changeImage = _this2.changeImage.bind(_this2);	_this2.chooseRandom = _this2.chooseRandom.bind(_this2);	return _this2;	}	Card.prototype.chooseRandom = function chooseRandom() {	return Math.floor(Math.random() * 1000) + 300;	};	Card.prototype.changeImage = function changeImage() {	this.setState({	imageNumber: "image=" + this.chooseRandom()	});	};	Card.prototype.render = function render() {	console.log(this.state.imageNumber);	return React.createElement(	"div",	null,	React.createElement(	"div",	{ className: "card" },	React.createElement(	"div",	{ className: "shadow" },	React.createElement("div", {	className: "shadowImage",	style: imageName(this.state.imageNumber)	})	),	React.createElement("div", {	className: "image",	style: imageName(this.state.imageNumber)	})	),	React.createElement(ChangeImageButton, {	handleClick: this.changeImage,	text: "Randomise image"	})	);	};	return Card;
}(React.Component);
ReactDOM.render(React.createElement(Card, null), document.getElementById('app'));
IOS shadow effect with React - Script Codes
IOS shadow effect with React - Script Codes
Home Page Home
Developer Martin Banks
Username martin-banks
Uploaded December 27, 2022
Rating 3
Size 3,562 Kb
Views 8,096
Do you need developer help for IOS shadow effect with React?

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!

Martin Banks (martin-banks) Script Codes
Name
Card shadow effect
Get slider values
Factory function revisit
Staggered vertical tags
RequestAnimationFrame
IOS style shadow
Playing with classes
A Pen by martin banks
Scale text to fit
Toggle switch
Create amazing SEO content 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!