PDA

View Full Version : CSS lifted corner box shadow



ranajyotic
17 Dec 2013, 6:58 AM
I am trying to apply a lifted corner box shadow to a Form panel. The form Panel is inside a container. I can't get it to work. Below is the js code and the CSS class.

Ext.define('MakeMyReview.view.FreeProfileCard', { extend: 'Ext.container.Container',
alias: 'widget.freeProfileCard',


height: 696,
id: 'profileCreateCard',
maxWidth: 900,
style: 'background-color:white;',
width: 900,
autoScroll: true,
layout: {
align: 'center',
type: 'vbox'
},


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'form',
margins: '5 0 0 0',
border: false,
height: 644,
id: 'formCreateProfile',
cls:'lifted',
style: 'border-style:solid;border-width:1px;',
width: 850,
shadow: false,
autoScroll: true,
layout: {
align: 'stretch',
type: 'vbox'
},
collapsible: false,
frameHeader: false,
title: 'User registration',
jsonSubmit: true,
method: 'POST',
tools: [
{
xtype: 'tool',
id: 'buttonCloseProfileCard',
tooltip: 'Go to Home',
type: 'prev'
}
],
items: [
{
xtype: 'container',
flex: 12,
margin: '',
style: 'border:none;background:transparent;',
shadow: false,
layout: {
align: 'stretch',
type: 'hbox'
},
items: [
{
xtype: 'container',
flex: 16,
height: 552,
margin: '10 10 10 10',
layout: {
align: 'stretch',
type: 'hbox'
},
items: [
{
xtype: 'container',
flex: 1,
margin: '0 5 0 0',
layout: {
align: 'stretch',
type: 'vbox'
},
items: [
{
xtype: 'fieldset',
flex: 6,
id: 'userDetailsCont',
margin: '5 5 5 5',
minHeight: 140,
style: 'border-style:solid;border-color:#AAAAFF;border-radius:2px;border-width:1px;',
autoScroll: true,
title: 'User details',
items: [
{
xtype: 'textfield',
anchor: '100%',
itemId: 'idUserName',
margin: '10 0 20 0',
overCls: '',
width: 282,
fieldLabel: 'User name',
labelWidth: 140,
allowBlank: false,
allowOnlyWhitespace: false,
blankText: 'Please enter a valid user id',
emptyText: 'Please enter a valid user id'
},
{
xtype: 'textfield',
anchor: '100%',
itemId: 'idPassword',
margin: '10 0 20 0',
width: 282,
fieldLabel: 'Password',
labelWidth: 140,
inputType: 'password',
allowBlank: false,
allowOnlyWhitespace: false,
blankText: 'Please enter a valid password',
emptyText: 'Please enter a valid password'
},
{
xtype: 'textfield',
anchor: '100%',
itemId: 'idConfirmPassword',
margin: '10 0 20 0',
width: 282,
fieldLabel: 'Confirm Password',
labelWidth: 140,
inputType: 'password',
allowBlank: false,
allowOnlyWhitespace: false,
blankText: 'Please re-enter the password',
emptyText: 'Please re-enter the password'
}
]
},
{
xtype: 'fieldset',
flex: 9,
id: 'profileDetailsCont',
margin: '5 5 5 5',
minHeight: 280,
style: 'border-style:solid;border-color:#AAAAFF;border-radius:5px;border-width:1px;',
title: 'Profile details',
items: [
{
xtype: 'textfield',
anchor: '100%',
itemId: 'idFirstName',
margin: '10 0 30 0',
width: 350,
fieldLabel: 'First Name',
labelWidth: 140,
allowBlank: false,
allowOnlyWhitespace: false,
blankText: 'Please enter yoru first name',
emptyText: 'Please enter yoru first name'
},
{
xtype: 'textfield',
anchor: '100%',
itemId: 'idLastName',
margin: '10 0 30 0',
width: 350,
fieldLabel: 'Last Name',
labelWidth: 140,
allowBlank: false,
allowOnlyWhitespace: false,
blankText: 'Please enter your last name',
emptyText: 'Please enter your last name'
},
{
xtype: 'textfield',
anchor: '100%',
itemId: 'idEmail',
margin: '10 0 30 0',
width: 350,
fieldLabel: 'Email:',
labelWidth: 140,
allowBlank: false,
allowOnlyWhitespace: false,
blankText: 'Please enter a valid email address',
emptyText: 'Please enter a valid email address',
vtype: 'email'
},
{
xtype: 'combobox',
anchor: '100%',
itemId: 'idIndustryType',
margin: '10 0 30 0',
width: 90,
fieldLabel: 'Industry type',
labelWidth: 140,
editable: false,
displayField: 'name',
forceSelection: true,
queryMode: 'local',
store: 'BusinessTypeStore'
},
{
xtype: 'combobox',
anchor: '100%',
itemId: 'idNotificationFreq',
maxWidth: 250,
minWidth: 250,
width: 250,
fieldLabel: 'Notification Frequency',
labelWidth: 140,
displayField: 'name',
queryMode: 'local',
store: 'NotifyFrequencyStore',
valueField: 'name'
}
]
},
{
xtype: 'container',
flex: 1,
id: 'addOrgCont',
layout: {
align: 'stretch',
pack: 'center',
type: 'vbox'
},
items: [
{
xtype: 'button',
id: 'idButtonAddOrg',
style: 'background:transparent;',
width: 385,
text: 'Add another Organization'
},
{
xtype: 'hiddenfield',
flex: 1,
id: 'orgIndex',
fieldLabel: 'Label'
}
]
}
]
},
{
xtype: 'container',
flex: 1,
margin: '5 0 0 5',
layout: {
type: 'fit'
},
items: [
{
xtype: 'container',
id: 'orgDetailsCont',
margin: '5 5 5 5',
minHeight: 400,
padding: '2 2 2 2',
style: 'border-style:solid;border-color:#AAAAFF;border-radius:5px;border-width:1px;',
autoScroll: true,
layout: {
fill: false,
animate: true,
type: 'accordion'
}
}
]
}
]
}
]
},
{
xtype: 'container',
flex: 1,
height: 46,
id: 'submitCont',
layout: {
type: 'absolute'
},
items: [
{
xtype: 'checkboxfield',
x: 10,
y: 0,
itemId: 'chkAgree',
margin: '15 0 0 0',
fieldLabel: '',
labelStyle: 'font-weight:bold;',
boxLabel: ''
},
{
xtype: 'button',
x: 30,
y: 10,
cls: 'button-url',
id: 'idTermsConditions',
style: 'border:none;background-color:white;text-decoration:underline;curson:pointer;font-size:large;background-image:none;color:#4477FF;',
scale: 'medium',
text: 'Please tick the box to agree to our Terms, Conditions & Privacy Policy',
textAlign: 'left'
},
{
xtype: 'button',
x: 590,
y: 10,
disabled: true,
height: 25,
id: 'buttonProfileSubmit',
width: 120,
text: 'Submit'
},
{
xtype: 'button',
x: 715,
y: 10,
height: 25,
id: 'buttonProfileReset',
width: 120,
text: 'Reset'
}
]
}
]
}
]
});


me.callParent(arguments);
}


});

CSS


.lifted{
position:relative;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.lifted:before, .lifted:after
{
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:0;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
.lifted:after
{
right:10px;
left:auto;
-webkit-transform:skew(8deg) rotate(3deg);
-moz-transform:skew(8deg) rotate(3deg);
-ms-transform:skew(8deg) rotate(3deg);
-o-transform:skew(8deg) rotate(3deg);
transform:skew(8deg) rotate(3deg);
}

Kevin Jackson
19 Dec 2013, 8:29 AM
This is css you are creating so the biggest challenge will be to address the various browser syntaxes necessary to make it work in all the browsers you may encounter. Our framework takes care of that in the background for you on our supported theming but you will be in charge here. You may find these helpful or they may get you started.

http://www.readitsideways.com/css3_demos/shadows/

(http://www.readitsideways.com/css3_demos/shadows/)http://jsfiddle.net/zuul/mPnTP/

http://cjwainwright.co.uk/webdev/liftedcorners/

http://www.funnygarbage.com/blog/forget-images-use-css3-drop-shadows

http://docs.sencha.com/extjs/4.2.2/#!/guide/theming

There are also several theming related presentations from last years SenchaCon
http://vimeo.com/album/2541003

ranajyotic
20 Dec 2013, 6:12 AM
Thanks for you reply I have tried all the methods and none worked. I put the class in the .cls of the form and nothing happens. Not sure what I am missing.