<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>UI Elements | Ben Hysa</title>
	<atom:link href="https://benhysa.me/projects/ui-elements/feed/" rel="self" type="application/rss+xml" />
	<link>https://benhysa.me</link>
	<description>Web Development</description>
	<lastBuildDate>Tue, 03 Dec 2024 20:35:46 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://benhysa.me/wp-content/uploads/2017/01/BH-Fav-150x150.png</url>
	<title>UI Elements | Ben Hysa</title>
	<link>https://benhysa.me</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Custom Toggle</title>
		<link>https://benhysa.me/project/custom-toggle/</link>
		
		<dc:creator><![CDATA[Ben Hysa]]></dc:creator>
		<pubDate>Wed, 04 Mar 2020 20:03:37 +0000</pubDate>
				<guid isPermaLink="false">http://benhysa.me/?post_type=project&#038;p=6356</guid>

					<description><![CDATA[Pure CSS custom toggle + background switch with minimal jQuery.]]></description>
										<content:encoded><![CDATA[<div id="portfolio-post-page" class="et_pb_section et_pb_section_0 et_pb_with_background et_section_regular" data-padding="0px|0px|0px|0px" >
				
				
				
				
				
				
				<div class="et_pb_row et_pb_row_0 portfolio-post-block et_pb_row_fullwidth et_pb_equal_columns et_pb_gutters1">
				<div class="et_pb_column et_pb_column_1_4 et_pb_column_0 portfolio-post-block-col1  et_pb_css_mix_blend_mode_passthrough">
				
				
				
				
				<div class="et_pb_module et_pb_text et_pb_text_0 portfolio-post-title  et_pb_text_align_left et_pb_bg_layout_dark">
				
				
				
				
				<div class="et_pb_text_inner"><h1>Custom Toggle</h1>
<p>&nbsp;</p>
<p>Pure CSS custom toggle + background switch with minimal jQuery.</p></div>
			</div><div class="et_pb_module et_pb_code et_pb_code_0 portfolio-post-buttons">
				
				
				
				
				<div class="et_pb_code_inner"><a href="https://benhysa.me/projects" class="portfolio-button">Other projects</a><a href="https://benhysa.me" class="portfolio-button">Back to Home</a></div>
			</div>
			</div><div class="et_pb_column et_pb_column_3_4 et_pb_column_1 portfolio-post-block-col2  et_pb_css_mix_blend_mode_passthrough et-last-child">
				
				
				
				
				<div class="et_pb_module et_pb_code et_pb_code_1 et_animated">
				
				
				
				
				<div class="et_pb_code_inner"><style>
		
		.toggle-container {
			width: 90%;
			max-width: 520px;
			height: 388px;
			padding: 0;
			margin: 7% auto;
			box-sizing: border-box;
			position: relative;
			overflow: hidden;
			border-radius: 10px;
      font-family: 'Montserrat', sans-serif;
			color: rgba(255, 255, 255, 0.5);
			box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7);
		}

		.toggle-container:before {
			content: '';
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			z-index: -1;
			background: url('https://benhysa.me/wp-content/uploads/2019/10/day-night-bg-2.jpg') top center/800px 800px no-repeat;
			transform: rotate(0deg);
			transition: transform 0.4s ease;
		}

		.toggle-container.nighty:before {
			transform: rotate(-180deg);
			background-position: bottom center;
			transition: transform 0.4s ease;
		}

		.switch-wrapper {
			display: flex;
			align-items: center;
			justify-content: space-around;
			max-width: 260px;
			background: #6DA69D;
			border-radius: 0 0 10px 10px;
			box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
			padding: 20px 10px;
			box-sizing: border-box;
			margin: 0 auto;
		}

		.side-labels {
			min-width: 46px;
			text-align: center;
		}

		.toggle-wrapper {
			position: relative;
			width: 100px;
			border-radius: 25px;
		}

		.toggle {
			opacity: 0;
			width: 100%;
			height: 100%;
			margin: 0;
			z-index: 3;
			position: absolute;
			top: 0;
			cursor: pointer;
		}

		.toggle-body {
			display: block;
			width: 100px;
			height: 50px;
			box-sizing: border-box;
			box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.3);
			padding: 10px;
			border-radius: 25px;
			background: #b9f2e9;
			z-index: 1;
		}

		.thumb {
			position: absolute;
			border-radius: 15px;
			top: 10px;
			left: 10px;
			width: 30px;
			height: 30px;
			background-color: orange;
			background: -webkit-radial-gradient(10px 10px, circle cover, yellow, #ffcc6e);
			box-shadow: 0 0 10px yellow;
			z-index: 2;
			transition: all 0.4s ease;
		}

		.toggle:checked + .toggle-body {
			background: #153655;
		}

		.toggle:checked + .toggle-body .thumb {
			background: #f8ff89;
			box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
			left: 60px;
			transition: all 0.4s ease;
		}

		.toggle:checked + .toggle-body .thumb:after {
			content: '';
			width: 100%;
			height: 100%;
			top: -8px;
			left: -8px;
			background: #153655;
			border-radius: 15px;
			position: absolute;
		}

		
		
		@media (max-width:499px) {
			.toggle-container {
				height: 300px;
			}
			.toggle-container:before {
				background-size: 556px 556px;
			}
		}

		</style>
  
		<div class="toggle-container">
		
			<div class="switch-wrapper">
			
				<span class="side-labels">Day</span>
				
				<div class="toggle-wrapper">
					<input type="checkbox" name="toggle" class="toggle">
					<label for="toggle" class="toggle-body">
						<span class="thumb"></span>
					</label>
				</div>
				
				<span class="side-labels">Night</span>
				
			</div>
			
		</div>
	  
<script>
		  
jQuery('.toggle').on('click', function() {
	jQuery('.toggle-container').toggleClass('nighty');
});

</script></div>
			</div>
			</div>
				
				
				
				
			</div>
				
				
			</div>

<p><a href="https://benhysa.me/project/custom-toggle/">Source</a></p>]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Input Jumping Label</title>
		<link>https://benhysa.me/project/input-jumping-label/</link>
		
		<dc:creator><![CDATA[Ben Hysa]]></dc:creator>
		<pubDate>Sun, 02 Feb 2020 16:08:34 +0000</pubDate>
				<guid isPermaLink="false">http://benhysa.me/?post_type=project&#038;p=6332</guid>

					<description><![CDATA[UI animation for form input jumping label. Done with CSS and jQuery.]]></description>
										<content:encoded><![CDATA[<div id="portfolio-post-page" class="et_pb_section et_pb_section_1 et_pb_with_background et_section_regular" >
				
				
				
				
				
				
				<div class="et_pb_row et_pb_row_1 portfolio-post-block et_pb_row_fullwidth et_pb_equal_columns et_pb_gutters1">
				<div class="et_pb_column et_pb_column_1_4 et_pb_column_2 portfolio-post-block-col1  et_pb_css_mix_blend_mode_passthrough">
				
				
				
				
				<div class="et_pb_module et_pb_text et_pb_text_1 portfolio-post-title  et_pb_text_align_left et_pb_bg_layout_dark">
				
				
				
				
				<div class="et_pb_text_inner"><h1>Input Jumping Label</h1>
<h2> </h2>
<h2>UI Animation</h2>
<p>&nbsp;</p>
<p>UI animation for form input jumping label. Done with CSS and jQuery.</p></div>
			</div><div class="et_pb_module et_pb_code et_pb_code_2 portfolio-post-buttons">
				
				
				
				
				<div class="et_pb_code_inner"><a href="https://benhysa.me/projects" class="portfolio-button">Other projects</a><a href="https://benhysa.me" class="portfolio-button">Back to Home</a></div>
			</div>
			</div><div class="et_pb_column et_pb_column_3_4 et_pb_column_3 portfolio-post-block-col2  et_pb_css_mix_blend_mode_passthrough et-last-child">
				
				
				
				
				<div class="et_pb_module et_pb_code et_pb_code_3 et_animated">
				
				
				
				
				<div class="et_pb_code_inner"><style>

.form-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80%;
  max-width: 460px;
  padding: 60px;
  margin: 8% auto;
  box-sizing: border-box;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.5);
  background-color: #ff0b55;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7);
  transition: transform 0.4s ease;
}


h6 {
  font-weight: 800;
  font-size: 2em;
  color: #FFF;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 20px;
}

.field-wrapper {
  display: flex;
  flex-direction: column-reverse;
  width: 100%;
  min-height: 102px;
  padding-bottom: 40px;
  overflow: hidden;
  box-sizing: border-box;
}

label {
  width: 100%;
  cursor: text;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  transform: translateY(20px);
  transition: all 0.4s ease;
}

.field-wrapper input {
  display: block;
  padding: 0 0 10px 0;
  width: 100%;
  outline: none;
  color: #042f4b;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 600;
  background: transparent;
  border-style: solid;
  border-width: 0 0 2px 0;
  border-bottom-color: rgba(255, 255, 255, 0.5);
  border-left-color: transparent;
  border-radius: 0;
}
  
  .field-wrapper input:focus {
    border-color: #FFF;
  }

.skew:focus {
  animation: pokeLabel 0.5s ease-out 0s 1 forwards;
}

.filled:focus {
  animation: none;
}

.skew:focus + label {
  animation: slideUP 0.8s ease 0s 1 forwards;
}

label.goUP {
  color: #FFF;
  transform: translateY(-8px);
  transition: all 0.4s ease;
}

@keyframes slideUP {
	0% { transform: translateY(20px); }
	40% { transform: translateY(-16px); }
	60% { transform: translateY(-8px); }
	80% { transform: translateY(-14px); }
	100% { transform: translateY(-8px); }
}

@keyframes pokeLabel {
	0 {
	border-color: #FFF;
	border-width: 0 0 2px 0;
	border-radius:0;
	}
	40% {
	border-color: #FFF;
	border-width: 0 0 2px 2px;
	border-radius:0 0 0 66px;
	padding-left: 10px;
	width: calc(100% - 30px);
	}
	80% {
	border-color: #FFF;
	border-width: 0 0 2px 2px;
	border-radius:0 0 0 66px;
	padding-left: 10px;
	width: calc(100% - 30px);
	}
	100% {
	border-color: #FFF;
	border-width: 0 0 2px 0;
	border-radius:0;
	}
}

.field-wrapper input.filled {
	border-color: #FFF;
  color: #042f4b;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}
</style>

<script>
jQuery(document).ready(function(){
		jQuery('input[type="text"]').each(function() {
	
		jQuery(this).on('blur, click',function(){
			if(!jQuery(this).val()){
				jQuery(this).addClass("skew");
				setTimeout(function () { 
					jQuery(this).removeClass('skew');
				}, 1000);
			} else {
				jQuery(this).removeClass("skew");
				jQuery(this).addClass('filled');
			}
			jQuery(this).next().addClass("goUP");
		});
		
		jQuery('input[type="text"]').on('keyup',function(){
			jQuery(this).addClass("filled");
		});
		
		jQuery('input[type="text"]').focusout(function(){
			jQuery(this).removeClass('skew');
			if(!jQuery(this).val()){
				jQuery(this).removeClass('filled');
				jQuery(this).next().removeClass("goUP");
				
			} else {
				jQuery(this).addClass('filled');
				jQuery(this).next().addClass("goUP");
			}
		});
		
	});

});
</script>
  
<div class="form-box">
	
	<h6>Say Hello...</h6>

	<div class="field-wrapper">
		<input type="text" name="test1" id="test1">
		<label for="test1" autocomplete="off">Name</label>
	</div>
  
	<div class="field-wrapper">
		<input type="text" name="test2" id="test2">
		<label for="test2" autocomplete="off">Job title</label>
	</div>
	
</div></div>
			</div>
			</div>
				
				
				
				
			</div>
				
				
			</div>

<p><a href="https://benhysa.me/project/input-jumping-label/">Source</a></p>]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
