IOS8 Text Design

Developer
Trevor L.J.M. McIntire
Size
4,080 Kb
Views
4,048
  1. IOS8 Text Design Previews
  2. IOS8 Text Design HTML Codes
  3. IOS8 Text Design CSS Codes

How do I make an ios8 text design?

An attempt at some iOS8 text. No real point of it.. What is a ios8 text design? How do you make a ios8 text design? This script and codes were developed by Trevor L.J.M. McIntire on 15 January 2023, Sunday.

IOS8 Text Design Previews
IQ Test

IOS8 Text Design - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>iOS8 Text Design</title> <link rel='stylesheet prefetch' href='https://uplusion23.github.io/cdn/codepen/prism/prism.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="main"> <div class="container"> <div class="row"> <h1 class="ios8-text">iOS 8 Text And Stuff</h1> <code class="language-css"> /* Some CSS Highlighting Perfect for an iOS Mini-site */ @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400); body { background: #272b30; margin: 0; padding: 0; font-family: 'Source Sans Pro'; font-weight: 300; } .container { width: 100%; padding-top: 20px 20%; height: 100%; } .row { position: relative; left: 50%; -webkit-transform: translateX(-50%); width: 40%; padding-left: 5%; padding-right: 5%; } .ios8-text { text-align: center; font-weight: 300; background: #5ac8fa; /* Old browsers */ background: -moz-linear-gradient(-45deg, #5ac8fa 0%, #ff2d55 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#5ac8fa), color-stop(100%,#ff2d55)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, #5ac8fa 0%,#ff2d55 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, #5ac8fa 0%,#ff2d55 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, #5ac8fa 0%,#ff2d55 100%); /* IE10+ */ background: linear-gradient(135deg, #5ac8fa 0%,#ff2d55 100%); /* W3C */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; } h1.ios8-text { text-align: center; }</code> </div> </div> <div class="arrow animated bounce"></div>
</div>
<footer> <h1>Made with love by Trevor McIntire</h1>
</footer> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://uplusion23.github.io/cdn/codepen/prism/prism.js'></script>
</body>
</html>

IOS8 Text Design - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400);
body { background: #272b30; margin: 0; padding: 0; font-family: 'Source Sans Pro'; font-weight: 300;
}
.container { width: 100%; padding-top: 20px 20%; height: 100%;
}
.row { position: relative; left: 50%; -webkit-transform: translateX(-50%); width: 40%; padding-left: 5%; padding-right: 5%;
}
.ios8-text { text-align: center; font-weight: 300; background: #5ac8fa; /* Old browsers */ background: -moz-linear-gradient(-45deg, #5ac8fa 0%, #ff2d55 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#5ac8fa), color-stop(100%,#ff2d55)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, #5ac8fa 0%,#ff2d55 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, #5ac8fa 0%,#ff2d55 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, #5ac8fa 0%,#ff2d55 100%); /* IE10+ */ background: linear-gradient(135deg, #5ac8fa 0%,#ff2d55 100%); /* W3C */ -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
h1.ios8-text { text-align: center;
}
code { border-radius: 4px; background: #1c1e22; display: inline-block; width: 100%; padding: 20px 0 !important; -webkit-box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.55); -moz-box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.55); box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.55); color: #f0f0f0; overflow-x: hidden;
}
.main { z-index: 1; position: relative; padding: 0; margin: 0; padding-bottom: 135px; background: #272b30; height: 100%; -webkit-box-shadow: 0px 3px 7px -2px rgba(0,0,0,0.75); -moz-box-shadow: 0px 3px 7px -2px rgba(0,0,0,0.75); box-shadow: 0px 3px 7px -2px rgba(0,0,0,0.75);
}
footer { position: relative; z-index: -2; height: 300px; background: none repeat scroll 0% 0% #31353A; font-size: 12px; color: #CCC; text-align: center;
}
footer h1 { position: fixed; z-index: 1; left: 50%; bottom: 110px; margin-left: -400px; width: 800px; list-style: outside none none; text-align: center; font-weight: bold; color: #FFF; font-size: 2.125rem;
}
@-moz-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -moz-transform: translateY(0); transform: translateY(0); } 40% { -moz-transform: translateY(-30px); transform: translateY(-30px); } 60% { -moz-transform: translateY(-15px); transform: translateY(-15px); }
}
@-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px); }
}
@keyframes bounce { 0%, 20%, 50%, 80%, 100% { -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } 40% { -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -moz-transform: translateY(-15px); -ms-transform: translateY(-15px); -webkit-transform: translateY(-15px); transform: translateY(-15px); }
}
.arrow { position: absolute; bottom: 50px; left: 50%; margin-left: -20px; width: 20px; height: 20px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=); background-size: contain;
}
.bounce { -moz-animation: bounce 2s infinite; -webkit-animation: bounce 2s infinite; animation: bounce 2s infinite;
}
/* ************************************************ */
/* Minimal Scroll Bar */
/* ************************************************ */
::-webkit-scrollbar { width: 6px; height: 6px;
}
::-webkit-scrollbar-track-piece { background-color: rgba(255,255,255,0.1); -webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical { height: 6px; background-color: #666; -webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:horizontal { width: 6px; background-color: #666; -webkit-border-radius: 6px;
}
IOS8 Text Design - Script Codes
IOS8 Text Design - Script Codes
Home Page Home
Developer Trevor L.J.M. McIntire
Username uplusion23
Uploaded January 15, 2023
Rating 3
Size 4,080 Kb
Views 4,048
Do you need developer help for IOS8 Text Design?

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!

Trevor L.J.M. McIntire (uplusion23) Script Codes
Name
Audio Player Dark Theme
A thing.
DOOM Page
404 Page using a simple GIF
Material Design Card Animation
A Pen by Trevor L.J.M. McIntire
Download Page
Gamepad Detection in HTML5 API
Admin Panel
CSGO Cheat Menu Design
Create amazing Facebook ads 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!