css3 - CSS circle mask -


i looking create dark mask @ bottom of circle contained in main circle.

can using css masks?

please see fiddle

<div id="profile-pic-wrap">   <div id="profile-pic">     <div class="profile-btn-bg">       <a href="#" class="profile-pic-btn">change profile</a>     </div>   </div> </div>

thanks

you can use overflow:hidden; :

demo

changes css : added overflow:hidden; , text-align:center #profile-pic

#profile-pic {  	position: absolute;  	z-index: 999;  	width: 200px;  	height: 200px;  	left: 33px;  	background: #fff;  	border: 3px solid #fff;  	border-radius: 100px;  	-webkit-border-radius: 100px;  	-moz-border-radius: 100px;  	top: 0px;  	position: relative;      background:red;      overflow:hidden;      text-align:center;  }  .profile-btn-bg{  	position: absolute;  	background-color: black;  	width: 100%;  	height: 30%;  	bottom: 0px;  }    a.profile-pic-btn{  	color: #fff;        }
<div id="profile-pic-wrap">    <div id="profile-pic">      <div class="profile-btn-bg">        <a href="#" class="profile-pic-btn">change profile</a>      </div>    </div>  </div>


Comments

Post a Comment

Popular posts from this blog

Python Kivy ListView: How to delete selected ListItemButton? -

Image
i'm trying learn kivy building simple todo-list app suggested dusty phillips, author of book "creating apps in kivy". this code far: from kivy.app import app kivy.uix.boxlayout import boxlayout kivy.properties import objectproperty kivy.uix.listview import listitembutton class taskbutton(listitembutton): pass class todoroot(boxlayout): task_input = objectproperty() task_list = objectproperty() def add_task(self): self.task_list.adapter.data.extend([self.task_input.text]) self.task_list._trigger_reset_populate() def del_task(self): pass class todoapp(app): def build(self): return todoroot() if __name__ == '__main__': todoapp().run() and kv file: #: import main todo #: import listadapter kivy.adapters.listadapter.listadapter #: import listitembutton kivy.uix.listview.listitembutton todoroot: <todoroot>: orientation: "vertical" task_input: task_input_view t...
Read more

ruby - How do I merge two hashes into a hash of arrays? -

http://codepad.org/wmyzqlis i'd merge these 2 arrays: a = { :a => 'a', :b => 'b', :d => 'd' } b = { :a => '1', :b => 'b', :c => 'c' } into hash looks this: {:a => ["a", "1"], :b => ["b", "b"], :c => [nil, "c"], :d => ["d", nil] } this doesn't work: p a.merge(b) { |k, v1, v2| [v1, v2] } # {:c=>"c", :a=>["a", "1"], :b=>["b", "b"], :d=>"d"} it's because hash#merge call block duplicate keys. a = { :a => 'a', :b => 'b', :d => 'd' } b = { :a => '1', :b => 'b', :c => 'c' } hash[(a.keys|b.keys).map { |key| [key, [a.fetch(key, nil), b.fetch(key, nil)]] }] # => {:a=>["a", "1"], :b=>["b", "b"], :d=>["d", nil], :c=>...
Read more