-1

I came across this UI Concept, I couldnt help but to admire it's beauty.

I am wondering if it is possible to create a Button that makes (mask) the control below them, to make them look transparent in that area. (In this case UITextField)

Please take a look at this image below

Cool UI Concept

ANy idea if this is possible to be done via code? Please look at how the button makes the UITextField become transparent with margin.

vikingosegundo
  • 52,040
  • 14
  • 137
  • 178
JayVDiyk
  • 4,277
  • 22
  • 70
  • 135

2 Answers2

1

You would do it exactly the way you just said - with a mask. A mask attached to a layer (or view) can make a hole through that view and its subviews. In this case, that hole is a circle.

Here's an example: two UITextFields, in a view whose mask cuts a circular hole at the end of them:

enter image description here

I didn't add the checkmark image but that's just more of the same.

matt
  • 515,959
  • 87
  • 875
  • 1,141
1

Here's a quick and simple example of how you can create such UI cocept with CSS3: 

.inputfield {
 width: 300px;
 height: 50px;
 line-height: 40px;
 padding: 8px;
 font-size: 20px;
 margin-top: 5px;
 border-collapse: collapse;
 border: 6px solid #000;
}
span.okcircle {
 display: inline-block;
 border: 6px solid #fff;
 background: #DF01A5;
 border-radius: 50%;
 width: 70px;
 height: 70px;
 margin-top: 24px;
 margin-left: 270px;
 z-index: 9;
 position: absolute; 

}
<span class="okcircle"> </span>
<div><input type="text" placeholder="username" class="inputfield"></div>
<div><input type="password" placeholder="password" class="inputfield"></div>


Here's the output:
enter image description here

arximughal
  • 270
  • 3
  • 16
  • it's just a quick example. You can modify it further to add `border-radius` around `input` elements and also you can add icons and other stuff later.. – arximughal May 15 '15 at 02:16