Social Slides

Developer
Eduard Mayer
Size
2,985 Kb
Views
36,432
  1. Social Slides Previews
  2. Social Slides HTML Codes
  3. Social Slides CSS Codes
  4. Social Slides JS Codes

How do I make an social slides?

[CSS] Social Slides originally designed by @calebbritton.Original: http://drbl.in/gWdzChrome renders the background using css3-gradients. Other Browsers will use a fallback.. What is a social slides? How do you make a social slides? This script and codes were developed by Eduard Mayer on 13 July 2022, Wednesday.

Social Slides Previews
IQ Test

Social Slides - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Social Slides</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html lang="en">
<head>	<meta charset="UTF-8">	<title>Social Slides</title>	<link rel="stylesheet" href="social-slide.css">
</head>
<body>	<section>	<div class="social-share fb">	<span class="fb-inner"></span>	<a class="cta fb" href="#">Like</a>	</div>	<div class="social-share tw">	<span class="tw-inner"></span>	<a class="cta tw" href="#">Tweet</a>	</div>	</section>	<section class="credit">	<p>Code by <a target="_blank" href="http://twitter.com/vsxed" class="credit-link">Eduard</a></p>	<p>Designed by <a target="_blank" href="http://drbl.in/gWdz" class="credit-link">@calebbritton</a></p>	<a target="_blank" href="http://github.com/vsxed/Social-Slides" class="credit-link button">Fork it on Github</a>	</section>
</body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Social Slides - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
body { padding: 3em 2em; font-family: 'Open Sans', Arial, sans-serif; font-size: 1em; line-height: 1; background: #333333;
}
.credit { display: block; max-width: 400px; text-align: center; padding: 0; font-size: 0.8em; color: #888888; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
}
.credit p a,
.credit a { color: white; text-decoration: none; font-weight: 700;
}
.credit p a:hover,
.credit a:hover,
.credit p a:active,
.credit a:active { text-shadow: 0 0 5px rgba(255, 255, 255, 0.4); color: white;
}
.credit p a.button,
.credit a.button { padding: 6px 12px; margin-top: 10px; background: #1a1a1a; border-radius: 3px;
}
.credit p a.button:hover,
.credit a.button:hover { background: #4d4d4d;
}
.credit p:last-of-type { margin-bottom: 30px;
}
section { max-width: 175px; margin: 0 auto; display: block; padding: 2em; width: 100%;
}
span { position: absolute; top: 7px; left: 16px; text-align: center; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; display: block;
}
span.fb-inner { background: no-repeat url('http://vsxed.github.com/Social-Slides/sprite.png') -41px 0; width: 40px; height: 40px;
}
span.tw-inner { background: no-repeat url('http://vsxed.github.com/Social-Slides/sprite.png') 0 0; width: 40px; height: 40px;
}
.social-share { width: 72px; height: 54px; display: inline-block; position: relative; overflow: hidden; border-radius: 6px;
}
.social-share:first-of-type { margin-right: 10px;
}
.social-share.fb { background: -webkit-gradient(radial, 37 56, 25, 36 190, 144, from(rgba(51, 88, 144, 0.99)), to(rgba(51, 88, 144, 0.99))), -webkit-gradient(radial, -10 72, 10, 310 -72, 72, from(rgba(54, 93, 152, 0.99)), to(rgba(54, 93, 152, 0.99))), -webkit-gradient(radial, 72 72, 20, -275 -72, 72, from(rgba(54, 93, 152, 0.99)), to(rgba(54, 93, 152, 0.99))) rgba(61, 105, 171, 0.99) !important; background: no-repeat url('http://vsxed.github.com/Social-Slides/sprite.png') 0 -47px;
}
.social-share.tw { background: -webkit-gradient(radial, 37 56, 25, 36 190, 144, from(rgba(56, 168, 186, 0.99)), to(rgba(56, 168, 186, 0.99))), -webkit-gradient(radial, -10 72, 10, 310 -72, 72, from(rgba(58, 175, 194, 0.99)), to(rgba(58, 175, 194, 0.99))), -webkit-gradient(radial, 72 72, 20, -275 -72, 72, from(rgba(58, 175, 194, 0.99)), to(rgba(58, 175, 194, 0.99))) rgba(76, 184, 201, 0.99) !important; background: no-repeat url('http://vsxed.github.com/Social-Slides/sprite.png') -73px -47px;
}
.social-share:hover > span { top: -29px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
}
.social-share:hover > .cta { bottom: 0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
}
.cta { text-decoration: none; font-size: 14px; font-weight: bold; padding: 6px 0; text-align: center; width: 72px; position: absolute; border-radius: 0 0 6px 6px; bottom: -60px; display: block; box-shadow: inset 0 1px 0 0 #ffffff, 0 -1px 0 0 rgba(0, 0, 0, 0.3); background-color: #e8e8e8; background-image: -webkit-linear-gradient(top left, #e8e8e8, #ffffff); background-image: -moz-linear-gradient(top left, #e8e8e8, #ffffff); background-image: -ms-linear-gradient(top left, #e8e8e8, #ffffff); background-image: -o-linear-gradient(top left, #e8e8e8, #ffffff); background-image: linear-gradient(top left, #e8e8e8, #ffffff); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e8e8e8', endColorstr='#ffffff', GradientType=0);; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
}
.cta.tw { color: rgba(58, 175, 194, 0.99);
}
.cta.fb { color: rgba(54, 93, 152, 0.99);
}

Social Slides - Script Codes JS Codes

/* NO JS */
Social Slides - Script Codes
Social Slides - Script Codes
Home Page Home
Developer Eduard Mayer
Username codewunder
Uploaded July 13, 2022
Rating 4
Size 2,985 Kb
Views 36,432
Do you need developer help for Social Slides?

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!

Eduard Mayer (codewunder) Script Codes
Name
CSSOff 2013 Submission
Twitter Widget Rebound
Whatsapp PTT Animation
A Pen by Eduard Mayer
Infotype SVG Animation
A Pen by Eduard Mayer
Scrollable see-through headline
Animated Ubuntu Touch-styled checkboxes
Social Sharing Buttons
Responsive GTA V Slider
Create amazing web 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!