html5 - Customize JQuery Mobile ListView with Box Shadow and Border -



html5 - Customize JQuery Mobile ListView with Box Shadow and Border -

i trying apply box shadow , border images in jquery mobile listview. want result attachment below. have not been able apply straight img attribute.

here css using box shadow.

.effect2 { position: relative; } .effect2:before, .effect2:after { z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width:300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); } .effect2:after { -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); right: 10px; left: auto; }

html

<ul data-role="listview" data-inset="false" data-theme="b"> <li data-theme=""> <a href="#history" data-transition="none" > <img class="box effect2" src="img/history-thumb.jpg"/> <h3>history</h3> <p>a brief history of beaufort</p> </a> </li> <li data-theme=""> <a href="#featured" data-transition="none"> <img src="img/featured.jpg"/> <h3>featured</h3> <p>featured local businesses , restaurants</p> </a> </li> <li data-theme=""> <a href="#restaurants" data-transition="none"> <img src="img/frogmorestew-thumb.jpg"/> <h3>restaurants</h3> <p>local restaurants , dining</p> </a> </li> <li data-theme=""> <a href="#shopping" data-transition="none"> <img src="img/shopping.jpg"/> <h3>shopping</h3> <p>shopping in downtown</p> </a> </li> </ul>

thanks,

robert

the <img> element not back upwards :before , :after pseudo elements in browsers, have utilize little more complex html , css. 1 way surround thumbnail in containing <div> , apply page curl effect it.

<ul data-role="listview" data-inset="false" data-theme="a"> <li class="ui-li-has-thumb"> <a href="#history" data-transition="none" > <div class="page-curl"> <img src="http://lorempixel.com/80/80/city/1/"/> </div> <h3>history</h3> <p>a brief history of beaufort</p> </a> </li> </ul>

add class ui-li-has-thumb <li> element padding added left allowing room image. surrround image container , apply class (page-curl in example). add together page curl css:

.page-curl { background: white; -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); position: absolute; top: 4px; left: 4px; width: 72px; height: 72px; z-index: 1; } .page-curl img{ position: absolute; max-width: 72px; max-height: 72px; z-index: 2; } .page-curl:before, .page-curl:after { background: none; bottom: 11px; -moz-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.9); -webkit-box-shadow: 0 10px 12px rgba(0, 0, 0, 0.9); box-shadow: 0 10px 12px rgba(0, 0, 0, 0.9); content: ""; height: 10px; left: 6px; position: absolute; width: 40%; z-index: -1; -moz-transform: skew(-4deg) rotate(-4deg); -webkit-transform: skew(-4deg) rotate(-4deg); transform: skew(-4deg) rotate(-4deg); } .page-curl:after { -moz-transform: skew(4deg) rotate(4deg); -webkit-transform: skew(4deg) rotate(4deg); transform: skew(4deg) rotate(4deg); left: auto; right: 6px; }

tweak taste.

here working demo

html5 css3 jquery-mobile jquery-mobile-listview

Comments

Post a Comment

Popular posts from this blog

java Multi query from Mysql using netbeans -

java Multi query from Mysql using netbeans - i have java code retrieve info mysql appropriate code in netbeans.the code below. want multi query such illustration finding total number of products , on.could help me please. in advance import java.sql.*; public class javamysqlselectexample { public static void main(string[] args) { seek { string mydriver = "com.mysql.jdbc.driver"; string myurl = "jdbc:mysql://localhost/sample"; class.forname(mydriver); connection conn = drivermanager.getconnection(myurl, "root", "mypasscode1"); string query = "select * products"; statement st = conn.createstatement(); resultset rs = st.executequery(query); while (rs.next()==true) { int code = rs.getint("code"); string productname = rs.getstring("product_name"); string producttype = rs.getstring("product_type"); system.out.format(" %d, %s, %s\n", code, pr
Read more

c# - DotNetZip fails with "stream does not support seek operations" -

c# - DotNetZip fails with "stream does not support seek operations" - i using dotnetzip in c# unzip stream follows: public static void unzipfromstream(stream stream, string outdir) { //omit seek grab block using (zipfile zip = zipfile.read(stream)){ foreach (zipentry e in zip){ e.extract(outdir, extractexistingfileaction.overwritesilently); } } } stream obtained using webclient client = new webclient(); stream fs = client.openread(url); however, got next exception exception during extracting zip stream system.notsupportedexception: stream not back upwards seek operations. @ system.net.connectstream.get_position() @ ionic.zip.zipfile.read(stream zipstream, textwriter statusmessagewriter, encoding encoding, eventhandler`1 readprogress) on server side(asp.net mvc 4), returning filepathresult or filestreamresult both caused exception. should obtain stream differently on client side? or how create server homec
Read more

c++ - StartServiceCtrlDispatcher don't can access 1063 error -

c++ - StartServiceCtrlDispatcher don't can access 1063 error - i write on c++ service , have error, , don't can fixed it. my service main function int main (int argc, tchar *argv[]) {dword f; for(int i=0;i<113;i++) f = getlasterror(); servicepath = lptstr(argv[0]); outputdebugstring(_t("my sample service: main: entry")); //installservice(); service_table_entry servicetable[] = { {service_name, (lpservice_main_function) servicemain}, {null, null} }; // startservice(); if(!startservicectrldispatcher(servicetable)) { f = getlasterror(); //addlogmessage("error: startservicectrldispatcher"); } else if( memcmp(argv[argc-1],"install",7)) { installservice(); } else if( memcmp(argv[argc-1],"remove",6)) { removeservice(); } else if( memcmp(argv[argc-1],"start",5)) { startservice(); } else if( memcmp(argv[argc-1],"stop",4))
Read more