css - create button with a transparent border that is only on the second part of the button -

-

want achieve

i have header 0.8 transparency , button border of 0.8 in same color.

the button need aligned center equal bottom of header.

good

problem

when place 0.8 transparency border on header same color , 0.8 transparency going darker. wrong

possible solution

https://jsfiddle.net/extranion/fnz1ccf0/2/

* {       margin:0; padding:0;   }  body {       background-image: url("http://gallery.photo.net/photo/8551440-md.jpg");  }  button {       background:none; border:none;   }    header {       height:100px;       background-color: rgba(41, 52, 61, .8);   }    .contact {       float:right;       height:100px;       width:200px;       position:relative;   }    .wrap-btn {       position:absolute;       top:100%;       left:50px;       height:30px;       width:100px;       border-radius: 0 0 20px 20px;       background-color: rgba(41, 52, 61, .8);   }  button {       position:absolute;       bottom:10px;       left:10px;       width:80px;       height:40px;       background:orange;       border-radius:15px;   }
<body>      <header>          <div class="contact">              lorem ipsum              <div class="wrap-btn">                  <button>inloggen</button>              </div>          </div>      </header>  </body>

question

is there better solution bottom part have border?

not sure if better solution, different approach. working after elements , gradients:

  button {    top: 100%;   position: absolute;   width: 90px;     margin-top:-28px;   height:56px;     border-radius:0px 0px 14px 14px;   background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 49%,rgba(41, 52, 61, .8) 50%,rgba(41, 52, 61, .8) 100%);  }  button:after{     content:'login';     position:absolute;     left:10px;     top:10px;     width:70px;     height:15px;     padding:10px 0px;     background:orange;     border-radius:10px; }

https://jsfiddle.net/dm8654ga/1/

using gradients way, using after elements - thing don not used content attribute text -> makes difficult translations etc.

ps: if border not rounded, whole thing lot easier (workin boxshadows..)


Comments

Post a Comment

Popular posts from this blog

Android : Making Listview full screen -

-
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".mainactivity"> <edittext android:layout_margintop="5dp" android:layout_width="match_parent" android:layout_height="50dp" android:background="@drawable/location_edittext" android:id="@+id/locationeditext" android:textsize="15sp" android:textcolor="#999" android:paddingleft="15dp" /> <com.example.ravi_gupta.slider.viewpagercustomduration android:layout_width="wrap_content" android:layout_height="0dp" android:id="@+id/viewpager" android:scrollbarstyle="outsideoverlay" android:layout_weight="0.5&quo
Read more

javascript - Parse JSON from the body of the POST -

-
i'm using cameratag.com record video on website. service can send json response server can save data database. don't know how proceed here: the documentation states please note json repsonse passed in body of post , not form parameters. here example of how parse response in ruby: data = json.parse(request.raw_post) video_uuid = data["uuid"] but don't know how data on javascript. i'm not experienced in js please bare me :) post sample: { "uuid": "00012710-4b65-0131-ffe6-22000a499ea4", "camera_uuid": "98373a20-79ee-0130-3e42-1231390fcc11", "created_at": "2013-12-20t05:25:02.000z", "percent_complete": 100, "short_code": "kktb4q", "metadata": { }, "state": "published", "recorded_from": "http://singwho.com", "publish_type": null, "formats": [ { "name&qu
Read more

javascript - Chrome Extension: Interacting with iframe embedded within popup -

-
i writing chrome extension needs interact urls user not have open. therefore using hidden iframes embedded within popup, , attempting click button within iframe. however, receiving same origin policy error. know possible extension interact iframes of different domain via content scripts when iframe on tab user has open, not sure if possible use content scripts interact iframes directly in popup. here code: manifest.json "content_scripts": [ { "js": [ "bin/jquery.min.js", "interaction.js" ], "all_frames": true, "run_at": "document_start", "matches": [ "http://*/*", "https://*/*" ] }], "permissions": [ "activetab", "tabs", "http://*/", "https://*/" ], interaction.js $(document).ready(function() { $('div#iframes').append("<iframe id='shop' src=
Read more