نوشتن کد شبیه به قالب آماریلیس

[masoudd 10]

سلاااااام

می خواستم کدی بنویسم که با ماژول توی قسمتی از قالب نمایش داده بشه وداخل اون نرم افزار های کاربردی رو به کاربر معرفی کنم اما نشد.

کسی می تونه کمکم کنه که کد شبیه به قسمت نرم افزار های کاربردی قالب آماریلیس بشه ، رو پنویسم :dadad4:

دمو آماریلیس | مرجع دانلود

ویرایش شده در اردیبهشت 93 توسط masoudd

[saber 208]

میتونید از ماژول html سفارشی استفاده کنید آیکون مربوط به هر نرم افزار رو قرار بدید و نامش رو هم جلوش درج کنید

حالا هر استایلی هم خواستید میتونید بهش بدید

[masoudd 10]

میتونید از ماژول html سفارشی استفاده کنید آیکون مربوط به هر نرم افزار رو قرار بدید و نامش رو هم جلوش درج کنید

حالا هر استایلی هم خواستید میتونید بهش بدید

اونو مشکل ندارم .

مشکل من کدش است ، چه جوری کدش رو بنویسم که وقتی موس رو روی اون می ره مثل قسمت نرم افزار های کاربردی قالب آماریلیس بشه ؟ :37:

[shahinbufaluo 10]

این کدهایی است که برای اون قسمت استفاده کرده

میتونی از توش دربیاری

*, *:before, *:after
{
 transition-property: all;
 transition-duration: 0.2s;
 transition-timing-function: ease;
 transition-delay: 0s;
}

/* Line 56 */
a
{
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 margin-left: 0px;
 padding-top: 0px;
 padding-right: 0px;
 padding-bottom: 0px;
 padding-left: 0px;
 font-size: 100%;
 vertical-align: baseline;
 background-color: transparent;
 background-image: none;
 background-repeat: repeat;
 background-attachment: scroll;
 background-position: 0% 0%;
 background-clip: border-box;
 background-origin: padding-box;
 background-size: auto auto;
 color: #3498db;
}

/* Line 101 */
:focus
{
 outline-width: 0px;
 outline-style: none;
}

/* Line 1070 */
.left ul li a
{
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #f9f9f9;
 display: block;
 margin-top: 0px;
 margin-right: -10px;
 margin-bottom: 0px;
 margin-left: -10px;
 padding-top: 0px;
 padding-right: 10px;
 padding-bottom: 3px;
 padding-left: 10px;
 font-family: tahoma;
 font-style: normal;
 font-variant: normal;
 font-weight: normal;
 font-size: 12px;
 line-height: 28px;
 font-size-adjust: none;
 font-stretch: normal;
 color: #34495e;
}

/* Line 3058 */
.moduletable.new li a, .left ul li a
{
 transform: translateZ(0px);
 box-shadow: 0px 0px 1px transparent;
}

/* Line 1049 */
.left > .moduletable ul li a
{
 font-family: tahoma;
}

/* Line 1078 */
.left ul li a:hover
{
 background-color: #1abc9c;
 background-image: none;
 background-repeat: repeat;
 background-attachment: scroll;
 background-position: 0% 0%;
 background-clip: border-box;
 background-origin: padding-box;
 background-size: auto auto;
 color: #ffffff;
}

/* Line 3064 */
.moduletable.new li a:hover, .left ul li a:hover
{
 animation-name: wobble-horizontal;
 animation-duration: 1s;
 animation-timing-function: ease-in-out;
 animation-iteration-count: 1;
}

/* Line 1155 */
.left > .moduletable ul li h4 a:hover, .left > .moduletable ul li h4 a
{
 background-color: transparent;
 background-image: none;
 background-repeat: repeat;
 background-attachment: scroll;
 background-position: 0% 0%;
 background-clip: border-box;
 background-origin: padding-box;
 background-size: auto auto;
 color: #555555;
 border-top-width: 0px;
 border-right-width-value: 0px;
 border-bottom-width: 0px;
 border-left-width-value: 0px;
 border-top-style: none;
 border-right-style-value: none;
 border-bottom-style: none;
 border-left-style-value: none;
 border-image-source: none;
 border-image-slice: 100% 100% 100% 100%;
 border-image-width: 1 1 1 1;
 border-image-outset: 0 0 0 0;
 border-image-repeat: stretch stretch;
 display: inline-block;
 padding-top: 0px;
 padding-right: 10px;
 padding-bottom: 0px;
 padding-left: 10px;
 font-family: tahoma;
 font-style: normal;
 font-variant: normal;
 font-weight: normal;
 font-size: 11px;
 line-height: 20px;
 font-size-adjust: none;
 font-stretch: normal;
}

/* Line 1155 */
.left > .moduletable ul li h4 a:hover, .left > .moduletable ul li h4 a
{
 background-color: transparent;
 background-image: none;
 background-repeat: repeat;
 background-attachment: scroll;
 background-position: 0% 0%;
 background-clip: border-box;
 background-origin: padding-box;
 background-size: auto auto;
 color: #555555;
 border-top-width: 0px;
 border-right-width-value: 0px;
 border-bottom-width: 0px;
 border-left-width-value: 0px;
 border-top-style: none;
 border-right-style-value: none;
 border-bottom-style: none;
 border-left-style-value: none;
 border-image-source: none;
 border-image-slice: 100% 100% 100% 100%;
 border-image-width: 1 1 1 1;
 border-image-outset: 0 0 0 0;
 border-image-repeat: stretch stretch;
 display: inline-block;
 padding-top: 0px;
 padding-right: 10px;
 padding-bottom: 0px;
 padding-left: 10px;
 font-family: tahoma;
 font-style: normal;
 font-variant: normal;
 font-weight: normal;
 font-size: 11px;
 line-height: 20px;
 font-size-adjust: none;
 font-stretch: normal;
}

/* Line 1163 */
.left > .moduletable ul li h4 a:hover
{
 background-color: #2ecc71;
 background-image: none;
 background-repeat: repeat;
 background-attachment: scroll;
 background-position: 0% 0%;
 background-clip: border-box;
 background-origin: padding-box;
 background-size: auto auto;
 color: #ffffff;
}

[masoudd 10]

این کدهایی است که برای اون قسمت استفاده کرده

میتونی از توش دربیاری

*, *:before, *:after
{
 transition-property: all;
 transition-duration: 0.2s;
 transition-timing-function: ease;
 transition-delay: 0s;
}

/* Line 56 */
a
{
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 margin-left: 0px;
 padding-top: 0px;
 padding-right: 0px;
 padding-bottom: 0px;
 padding-left: 0px;
 font-size: 100%;
 vertical-align: baseline;
 background-color: transparent;
 background-image: none;
 background-repeat: repeat;
 background-attachment: scroll;
 background-position: 0% 0%;
 background-clip: border-box;
 background-origin: padding-box;
 background-size: auto auto;
 color: #3498db;
}

/* Line 101 */
:focus
{
 outline-width: 0px;
 outline-style: none;
}

/* Line 1070 */
.left ul li a
{
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #f9f9f9;
 display: block;
 margin-top: 0px;
 margin-right: -10px;
 margin-bottom: 0px;
 margin-left: -10px;
 padding-top: 0px;
 padding-right: 10px;
 padding-bottom: 3px;
 padding-left: 10px;
 font-family: tahoma;
 font-style: normal;
 font-variant: normal;
 font-weight: normal;
 font-size: 12px;
 line-height: 28px;
 font-size-adjust: none;
 font-stretch: normal;
 color: #34495e;
}

/* Line 3058 */
.moduletable.new li a, .left ul li a
{
 transform: translateZ(0px);
 box-shadow: 0px 0px 1px transparent;
}

/* Line 1049 */
.left > .moduletable ul li a
{
 font-family: tahoma;
}

/* Line 1078 */
.left ul li a:hover
{
 background-color: #1abc9c;
 background-image: none;
 background-repeat: repeat;
 background-attachment: scroll;
 background-position: 0% 0%;
 background-clip: border-box;
 background-origin: padding-box;
 background-size: auto auto;
 color: #ffffff;
}

/* Line 3064 */
.moduletable.new li a:hover, .left ul li a:hover
{
 animation-name: wobble-horizontal;
 animation-duration: 1s;
 animation-timing-function: ease-in-out;
 animation-iteration-count: 1;
}

/* Line 1155 */
.left > .moduletable ul li h4 a:hover, .left > .moduletable ul li h4 a
{
 background-color: transparent;
 background-image: none;
 background-repeat: repeat;
 background-attachment: scroll;
 background-position: 0% 0%;
 background-clip: border-box;
 background-origin: padding-box;
 background-size: auto auto;
 color: #555555;
 border-top-width: 0px;
 border-right-width-value: 0px;
 border-bottom-width: 0px;
 border-left-width-value: 0px;
 border-top-style: none;
 border-right-style-value: none;
 border-bottom-style: none;
 border-left-style-value: none;
 border-image-source: none;
 border-image-slice: 100% 100% 100% 100%;
 border-image-width: 1 1 1 1;
 border-image-outset: 0 0 0 0;
 border-image-repeat: stretch stretch;
 display: inline-block;
 padding-top: 0px;
 padding-right: 10px;
 padding-bottom: 0px;
 padding-left: 10px;
 font-family: tahoma;
 font-style: normal;
 font-variant: normal;
 font-weight: normal;
 font-size: 11px;
 line-height: 20px;
 font-size-adjust: none;
 font-stretch: normal;
}

/* Line 1155 */
.left > .moduletable ul li h4 a:hover, .left > .moduletable ul li h4 a
{
 background-color: transparent;
 background-image: none;
 background-repeat: repeat;
 background-attachment: scroll;
 background-position: 0% 0%;
 background-clip: border-box;
 background-origin: padding-box;
 background-size: auto auto;
 color: #555555;
 border-top-width: 0px;
 border-right-width-value: 0px;
 border-bottom-width: 0px;
 border-left-width-value: 0px;
 border-top-style: none;
 border-right-style-value: none;
 border-bottom-style: none;
 border-left-style-value: none;
 border-image-source: none;
 border-image-slice: 100% 100% 100% 100%;
 border-image-width: 1 1 1 1;
 border-image-outset: 0 0 0 0;
 border-image-repeat: stretch stretch;
 display: inline-block;
 padding-top: 0px;
 padding-right: 10px;
 padding-bottom: 0px;
 padding-left: 10px;
 font-family: tahoma;
 font-style: normal;
 font-variant: normal;
 font-weight: normal;
 font-size: 11px;
 line-height: 20px;
 font-size-adjust: none;
 font-stretch: normal;
}

/* Line 1163 */
.left > .moduletable ul li h4 a:hover
{
 background-color: #2ecc71;
 background-image: none;
 background-repeat: repeat;
 background-attachment: scroll;
 background-position: 0% 0%;
 background-clip: border-box;
 background-origin: padding-box;
 background-size: auto auto;
 color: #ffffff;
}

اقا این یه چیزی کم داره ، هرچی کردم نشد.

[masoudd 10]

up :heey:

[masoudd 10]

کمک [motat]

کسی بلد نیست و یا وقت ندارید ؟ :ad54ad:

[masoudd 10]

up :78: :a54d65a:

[Vahid Taheri 74]

از خاصیت animation در css3 استفاده شده. لینک زیر رو نگاه کنید :

CSS3 Animations

موفق باشید

[masoudd 10]

خیلی خیلی دیر، اما کارامد howit

مرسی :25::35:

ویرایش شده در اردیبهشت 93 توسط masoudd

[masoudd 10]

هر کاری کردم چیزی که می خواستم نشد.:13::13::13::13:

میشه تو نوشتن کد کاملش به من کمک کنید ، هم html و هم css و هم افکت ، فقط لازم باشه در ماژول

Compago Blank Module - Joomla! Extensions Directory

قرار بدمش . لطفا :dadad4:

[omid 15]

این قالب من طراحی کردم و برای افکتاش اینا از این استفاده کردم راحت میتونی استفاده کنی بفرماید

لینک