LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

  
    
    

    Ionic Frosted Glass

    
    

     

    

  
  

    
      
      
        

Blurred!

CSS
body {
  cursor: url('https://ionicframework.com/img/finger.png'), auto;
}

.messages {
	margin:0;
	padding:0;
	list-style-type:none;
}

.messages li {
	display:block;
	clear:both;
	max-width:50%;
	margin:0 0 1rem 0;
	padding:0;
}

.messages li:nth-child(even) {
	float:right;
}

.messages li:nth-child(even) img {
	float:right;
}

.messages p {
	border-radius:.75rem;
	background:#e6e5eb;
	color:#383641;
	padding:.6875rem;
	margin:0;
	font-size:.875rem;
}

.messages li:nth-child(even) p {
	background:#158ffe;
	color:#fff;
}

.messages img {
	display:block;
	max-width:65%;
	border-radius:.75rem;
}

JS
angular.module('starter', ['ionic', 'ionic.contrib.frostedGlass'])

.controller('PageCtrl', function($scope, $ionicFrostedDelegate, $ionicScrollDelegate, $rootScope) {
  var messageOptions = [
    { content: '

Wow, this is really something huh?

' }, { content: '

Yea, it\'s pretty sweet

' }, { content: '

I think I like Ionic more than I like ice cream!

' }, { content: '

Gee wiz, this is something special.

' }, { content: '' }, { content: '

Is this magic?

' }, { content: '

Am I dreaming?

' }, { content: ''}, { content: '

Am I dreaming?

' }, { content: '

Yea, it\'s pretty sweet

' }, { content: '

I think I like Ionic more than I like ice cream!

' }, ]; var messageIter = 0; $scope.messages = messageOptions.slice(0, messageOptions.length); $scope.add = function() { var nextMessage = messageOptions[messageIter++ % messageOptions.length]; $scope.messages.push(angular.extend({}, nextMessage)); // Update the scroll area and tell the frosted glass to redraw itself $ionicFrostedDelegate.update(); $ionicScrollDelegate.scrollBottom(true); }; });

Description

An implementation of the iOS 7 Frosted Glass Blur in HTML5 with the Ionic Framework.
Term
Mon, 11/27/2017 - 21:30

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv